Why is my banner and navigation bar centred on a 24" Mac but not on a 27"?

Hi there,

I designed my website using HTML/CSS, and I have a top banner right below my fixed header, and below the banner is my menu/navigation. When i view the site on my laptop and 24" mac, both are centred; however, when I view my site on a 27" Mac, the banner is off to the left and the menu/navigation bar is a bit over to the right. Is there any way I can have both stay in the same spot no matter what size monitor I view the site on? I'll post the CSS/HTML for both below ("title" is the banner).


#title
{
height: 100px;
position: relative;
text-align:left;
z-index: -1;
margin-left: auto;
}

#menu
{
padding-top: 18px;
border-bottom: double 2px white;
border-top: double 2px white;
width: 75%;
height: 50px;
margin-top: 160px;
margin-left: 868px;
margin-right: 203px;
float: right;
text-align:center;
letter-spacing:4px;
word-spacing:4px;
font-family: "Arial";
font-size: 150%;
color: #ffffff;
}

<img src="images/banner.png" alt="Books and Technology" style="margin-left: 380px"/>

<div id="menu">
<font size="5"><b><a href="html.html">HOME</a> | <a href="page1.html">PAGE 1</a> | <a href="page2.html">PAGE 2</a> | <a href="page3.html">PAGE 3</a> | <a href="page4.html">PAGE 4</a> | <a href="page5.html">PAGE 5</a> | <a href="page6.html">PAGE 6</a></b></font>

</div>

Do you want it to stay in the same spot or do you want it to stay centered?
For centering inline elements like images you need to apply text-align: center to the parent. Centering block-level elements like divs is easy if you assign a specific width to them and set left and right margin to “auto”.

And by the way:
<font size="5"><b>…

Please don’t do that. For what do we have CSS?

A good tip when styling your site: Resize your browser window often to see what happens! The effect you are experiencing is caused by the amount of horizontal pixels being increased as the resolution gets better, you can get the same effects by making your browser window narrower. :thumbsup: