Or, you could use this if you want it to truly stick to the bottom right corner:
position:absolute;
right:0;
bottom:0;
I'll try to explain what's going on in your code so you have a better idea how to procede.
position:absolute; takes the element in question out of the normal flow of the document.
For example, if I had three paragraphs in a row in an HTML document, normally they would apear in your browser one right after the other in the same order they are written in the HTML document. However, when I use position:absolute on one of those paragraphs, I'm removing it from the document flow, and can position it anywere on the page, relative to the top, bottom, left, and right sides of the browser window.
I made a really quick codepen to show you exactly what I mean: http://codepen.io/anon/pen/sLdzJ
When you look at the HTML, paragraph one, paragraph two, and paragraph three are in order. But when you look at the way the code is rendered, paragraph two is taken out of the normal order and stuck at the bottom right corner of the window.
So, when you say
possition:absolute;
right:0;
bottom:0;
You're really saying, take this element out of it's normal position, and put it 0px from the right edge of the browser window, and 0px from the bottom of the browser window.
The reason your original code doesn't work on bigger monitors is because you're saying you want the element positioned left:0 (which means 0px from the left edge of the screen) and THEN you're saying right:-824px which moves it from the left edge over to the right by 824px. If you didn't have left:0 first, the h2 would start at it's normal position and then be moved to the right 824px which would be 824px off the screen to the right.
Positioning the h2 to the very left edge of the screen, then pushing it over to the right 824px is basically the same thing as saying left:824px (ie position the elemet 824px from the left edge of the screen). When the monitor gets bigger, instead of the h2 appearing somewhere near the right edge, it's appearing closer to the middle b/c it's still only getting pushed 824px to the right from the left edge of the window.
Typically, you only use left or right positioning, but not both. You would also use top or bottom possitioning, but not both, because they cancel each other out.
OK, now on to the second part of your question.
Position:relative; means you want to position the element relative to where it would normally be in the page. So, going back to the paragraph example, if I had the second paragraph positione:relative; and left:20px; the paragraph would appear basically in it's normal position, sandwiched between the first and third paragraphs, but it would be indented to the left by 20px compaired to the normal paragraphs.
I'm not sure why you're creating a pos_left and pos_right class for the H2.
The first one
h2.pos_left { position: relative; left: -20px;}
would position the h2 20px to the right of where it would normally be.
The second one
h2.pos_right { position: relative; left: 20px;}
would move the H2 20px to the left of its default position on the page.
If you use these at the same time, they will just cancel each other out. Seperately, neither of them will position the h2 at the bottom right of the page.
I hope that makes sense!