Navigation positioned wrongly in html/css -


i'm coding new portfolio , navigation on in wrong place , can't figure out why.

http://i26.tinypic.com/25psi10.png

i want text inline lines on sides instead it's moved right , down , can't figure out why it's done this.

this relevant coding:

body {    padding: 0px;    margin: 0px;    background:url('images/background.png');    font-family: century gothic;  }    #nav {    text-decoration: none;    color: white;  }    #container {    margin: 0 auto;    width: 960px;  }    #logo {    background:url('images/logo.png');    height: 340px;    width: 524px;    float: left;    margin-left: 0px;  <!--check-->  }    #nav {    background:url('images/nav_container.png');    width: 427px;    height: 33px;    float: right;    margin-top: 100px;    padding: 0px;    }    #main_nav li {    list-style: none;    display: inline;    font: 18px century gothic, sans-serif;    color: white;    margin-right: 18px;    padding: 0px;  }
<html>    <head>      <meta http-equiv="content-type" content="text/html;charset=utf-8" />      <link href="styles.css" rel="stylesheet" type="text/css" />      <title>mozazdesign portfolio</title>    </head>      <body>        <div id="container">        <div id="header">          <div id="logo">            </div><!--end logo-->            <div id="nav">            <ul id="main_nav">              <li><a href="#">home</a></li>              <li><a href="#">about me</a></li>              <li><a href="#">gallery</a></li>              <li><a href="#">blog</a></li>              <li><a href="#">contact</a></li>            </ul><!--end main nav-->          </div><!--end nav-->        </div><!--end header-->      </div>    </body>  </html>

what happens when decrease margin-right: 17px;

i believe last element should add less margin-right


Comments

Popular posts from this blog

c++ - How do I get a multi line tooltip in MFC -

asp.net - In javascript how to find the height and width -

c# - DataTable to EnumerableRowCollection -