in CSS - how do you make this nav bar stretch across it's entire length

Question

I want this navigation bar to stretch it's entire length so there are no empty spaces.

you can see the navigation bar's code here: navigation bar builder

been trying for a while now and there is no clear answer out there about these things.. i really find it strange since it's the most common thing anyone would want in their website a navigation bar without empty spaces..

Answer 1

Well the way that you have it worded, you want it to fill the entire nav at the top, so you want, this will change the spacing between each of the list items to the left, you can also add padding-right to change the amount of spacing between the right of each item

#cssmenu ul li {
float: left;
display: block;
padding: 0;
padding-left:13%; /* Change this value to fit your screen */
}

Answer 2

The menu container does fill up all the space. It just looks like it doesn't because the preview container on that website has space around it.

I put it in jsbin and it looks fine. There is a few px of margin still, and that's due to the body's margin. Remove it with:

body {
  margin: 0;
}

Demo

Answer 3

The css you need is

width: auto

which is being used. On your an actual web page it will spread across, but on this platform it is not showing it to stretch most likely because that was the intentions of the developers who had made this. Specifically, their css class "preview-container" is what limits the width.

Answer 4

It looks like <div class="preview-container"> is stretching to 100% width of it's containing div (the one with the #menu-builder .right selector in your css), but that div has a padding of 15px 20px.

If you change that to 15px 0px and reduce <div class="preview-menu">'s padding to 0 it will stretch to 100% of the main window.

Answer 5

In the width auto, you only need to change width auto; to width num; where num is the amount of pixels you want it to be ex. width 440px;

Answer 6

<div id='cssmenu'>
    <ul>
        <li class='active'><a href='index.html'><span>Home</span></a>
        </li>
        <li><a href='#'><span>Products</span></a>
        </li>
        <li><a href='#'><span>About</span></a>
        </li>
        <li class='last'><a href='#'><span>Contact</span></a>
        </li>
    </ul>
</div>

Fiddle