Aligning a nar bar left to right

Question

Hi!
I am trying to align my nav bar to be exactly the width of the header. I checked it on 3 other computers. It looks perfect on 2 of them, but on the 3rd the bars are miscued. How can I know that this is happening? 2 people said it was fine and the 3rd guy sent me the attached photo (BTW, red is now gone) I would like the 6 boxes to line up directly under the header...any help would be appreciated.....
Here is the website:
http://kobwebsecure.com/elitedesigner/
Thanks!

Answer 1

<style type="text/css">
                    margin: 0;
                    padding: 0;
                    border: 0;
body {
                    font-size: 62.5%;
                    background-color: white;
                    text-align: center;
#wrapper {
                    font-size: 1.2em;
                    text-align: left;
                    margin-left: auto;
                    margin-right: auto;
                    width: 800px;
#MenuBar1 {
                    margin-left: auto;
                    margin-right: auto;
                    padding-left: 0;
                    float: left;
                    list-style-type: none;
                    background: #333;
                    width: 100%;
                    text-align: center;
                    overflow: hidden;
                    position: relative;
#MenuBar1 ul {
                    clear:left;
                    float:left;
                    list-style:none;
                    margin:0;
                    padding:0;
                    position:relative;
                    left:50%;
                    text-align:center;
#MenuBar1 ul li {
                    display:block;
                    float:left;
                    list-style:none;
                    margin:0;
                    padding:0;
                    position:relative;
                    right:50%;
#MenuBar1 ul li a {
                    display:block;
                    float: left;
                    color: yellow;
                    padding: .2em 1em;
                    text-decoration: none;
                    font-weight: 900;
                    text-align: center;
                    margin: auto auto;
</style>
The html looks like this same as yours except that I have created a separate div called MenuBar1.  The fonts I have used can be ignored because this is just for test.
<div id="wrapper">
<div id="MenuBar1">
<ul class="MenuBarHorizontal">
<li>
<a href="index1.html">
Homepage
</a>
</li>
<li>
<a tabindex="-1" href="#">
Services
</a>
</li>
<li>
<a tabindex="-1" href="#">
Price Rates
</a>
</li>
<li>
<a tabindex="-1" href="#">
Staff
</a>
</li>
<li>
<a tabindex="-1" href="#">
Location
</a>
</li>
<li>
<a tabindex="-1" href="#">
Contact
</a>
</li>
</ul>
</div>
</div>
To view tha code, you need to use:  View >> Source
in any browsers in Windows.
hth