How to stretch top nav to fit page container width

Question

I'm brand new to this coding stuff so please go easy on me ;)

I'm trying to make the top nav on this website stretch to fit the width of what I understand to be the "container" of the website which is 900px wide. I can't for the life of me remove what appears to be padding or margins to the left and right of the nav. See code below.

Site screenshot here: http://img560.imageshack.us/img560/9479/237c.png

Right now I'm just cleverly making adjustments to padding to make the nav somewhat centered on the page, but ultimately it would look much better if it met up with the edge of the containter like everything else.

Thx for any help.

/* Navigation
--------------------------------------------------------------------------------*/


#topnav {
    clear: both;
    margin: 0 0;
    overflow: hidden;
}

#topnav ul {
    list-style: none;
    float: left;
    text-align: center;
}

#topnav ul li {
    list-style: none;
    float: left;
    background: url(nav-sep.png) right 0px no-repeat;
    padding: 15px 0px 12px 0px;
    display: inline block;
}

#topnav ul > li:last-child,
#topnav ul > span:last-child li {
    background: none;
    padding-right: 0;
}

#topnav a {
    float: left;
    display: block;
    color: #545454;
    font-family: Blair, sans-serif;
    font-weight: 500;
    padding: 6px 0 6px;
    border: 0;
    border-top: 3px solid transparent;
    outline: 0;
    margin: 0 16.6px;
    list-style-type: none;
    font-size: .75em;
    text-transform: uppercase;
}

#topnav ul > li:last-child a,
#topnav ul > span:last-child li a {
    margin-right: 0;
}

#topnav li#active a,
#topnav a:hover {
    color: #666666;
    border: 0;
    border-top: 3px solid #8cc640;
}

Could you add some HTML to show us the structure of your page? Better yet, set up a fiddle (http://jsfiddle.net) — zsaat14, Dec 09 '13 at 19:12

score 0 · Answer 1 · edited May 23 '17 at 12:13

0

Try with

    margin-left:auto;
    margin-right:auto;

See also:

Cross browser method to fit a child div to its parent's width

Hope this helped. Cheers.

edited May 23 '17 at 12:13

Community

1
1

answered Dec 09 '13 at 19:17

dwettstein

667
1
7
17

score 0 · Answer 2 · answered Dec 09 '13 at 19:21

I would say to add a main container div that will enclose all your existing html, and then define a css for it with margin-left/right as auto :

    <head>
    .......
    <style>
    #mainContainer {
      margin-left: auto;
      margin-right: auto;
    }
    </style>
    </head>    
    <html>
    <body>
    <div id="mainContainer">
    ............................
    ............................
    ............................
    </div>
    </body>
    </html>

score 0 · Answer 3 · answered Dec 09 '13 at 19:27

Hi if you are new on this you need to know that for default all element tags like ul, p or body has for default some values on properties like margin and padding. What you need is first work on reset those values in CSS to avoid issues and make more easier your cutomization. In your case the ul has some properties:

ul {
  display: block;
  list-style-type: disc;
  margin-before: 1em;
  margin-after: 1em;
  margin-start: 0;
  margin-end: 0;
  padding-start: 40px; 
}

You can use this simple global reset with * as the global selector :

* {
  margin:0;
  padding:0;
}

Or search for some complex resets like this one.

Then with values on 0 you can customize in a better way your elements:

#topnav ul {
  list-style: none;
  float: left;
  text-align: center;
  width:100%;
}

How to stretch top nav to fit page container width

3 Answers3