You’re really close to getting that working but I think there’s a few things you could do to tidy it up, whilst fixing that bug of yours along the way.
Firstly, I’d usually use a wrapper div to wrap everything that you want to be centred on the page. That way, divs within your wrapper with different widths won’t act differently according to the screen resolution.
Second of all, make sure you’ve never got more than one div (or any other element) with the same ‘id’ attribute. Instead of <div id="wrapper"> used twice to get the same effects applied, use classes. This simply means changing to <div class="wrapper">, then referencing ‘div.wrapper’ in your CSS.
You may want to consider changing the word ‘wrapper’ to ‘container’ too, as if you were to take my suggestions on then you’d already have a wrapper on the outside.
Also, try not to use <br /> to gain a line break between elements. <br /> is best used in places such as paragraphs to separate paragraph content. (i.e. <p>bla bla bla<br />bla2 bla2 bla2</p>). Instead, try using margin and padding to achieve your layout requirements.
Headings should ideally be represented in the code as headings, rather than divs. This helps to make your code more semantic and accessible to those who may view websites in a less conventional manner (i.e. using screenreaders etc.)
These things are always harder to explain with words, so I’ll show you some code to illustrate what I’ve said above:
If you apply ‘margin: 0 auto;’ to:
then you should see your resolution bug fixed. From the code I’ve supplied above, attempt to use margin and padding to lay everything out, then I think you’ll really be heading towards some nice HTML markup, nice CSS, which is cross-browser compatible whilst also accessible to all users who may visit your site.