Having positioning problems, possible clash of 2 stylesheets?

I'm having some positioning problems on my gallery page of my website. I haven't uploaded the website yet unfortunately, as I'm hoping to rectify these problems first. The navigation part of my website is automatically being positioned way out to the right of the site, when I want it to be automatically centered, as it should be. There's no right positioning in any part of my stylesheet which makes me think it could be a clash of my gallery stylesheet, and my main stylesheet.

style.css:

#wrapper {

}

#landscape {
    height: 599px;
    margin: auto;
}

#nav {
    background: #404040;
    float: left;
    height: 129px;
    width: 1026开发者_Python百科px;
    margin-left: 375px;

}

#headline {
    margin-top: 15px;
    margin-left: 129px;
}

#navlist {
     margin: 0;
     padding: 0;
     list-style-type: none;
     margin-left: 129px;
     border: none;
}

#navlist li {
    display: inline;
    padding-right: 10px;

}

#logo {
    float: right;
    width: 294px;
    height: 111px;
    background: url(images/logo_grey.jpg);
    margin-right: 120px;
    margin-top: -98px;
}

gallery style:

#wrapper {
    margin:auto;
    width: 990px;
    height: 599px;
}

#main {
    margin-bottom: -20px;
}

#gallery {
    height: 483px;
    width: 990px;
    overflow: auto;
    padding: 10px;

}

#gallery img {
    padding: 15px;
    border: thin black solid;
}

Structure of HTML file:

<div id = "wrapper">
    <div id = "main">

        <div id="gallery">

        </div>

    <div id = "nav">

        <div id = "headline">
              <img src="images/tagline.jpg" />
        </div>

      <ul id="navlist">
          <li><a href="#"><img src="images/btn_home.jpg" /></a></li>
          <li><a href="#"><img src="images/btn_gallery.jpg" /></a></li>
      </ul>

  <div id = "logo">

  </div>

</div>

My apologies for the length of this question, I want to as specific as possible to get this solved. Hope you can help me, I appreciate it.

If you need any more information, please let me know, and I'll try and help you as best I can.

Kind Regards,

Snakespan

In style.css you have:

#nav {
...
    margin-left: 375px;
}

This is forcing your navigation to the right, by applying a 375px "buffer" to the left hand side.

Change it to this to get it back in the center

#nav {
...
    margin: 0 auto;
}

I suppose, while #nav is centered, the margin-left: 375px; of #nav "push" it on the right right. If you remove this, probably you will get what you need.