Question

So, I’m making a navbar for my website, but the problem is, I can’t seem to make it fit the entire screen width. (Note: still working on the bar so if there’s any useless code please do your best to ignore it :P)

When I do auto width (on padding-left) it fills only a small portion of the screen, but when I do 100% width, it doesn’t show the actual buttons. I can do px or em because it messes up with different screen sizes.

Any help at all would be great, thanks!

HTML- `

<ul class="menu">  
<li class="menu"><a href="/wordpress/">Home</a></li>
<li><a href="/wordpress/">About</a></li>
<li><a href="/wordpress/">Blog</a></li>
<li><a href="/wordpress/">Services</a></li>
<li><a href="/wordpress/">Portfolio</a> </li>
<li><a href="/wordpress/">Contacts</a></li>

---

CSS-

                 ul.menu a {  
    display: inline-block;  
    padding: 0 30px;
    border-left: 0px solid rgba(255,255,255,0.1);  
    border-right: 0px solid rgba(0,0,0,0.1);  
    text-align: center;  
    line-height: 50px;  
    background-image: linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
    background-image: -o-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
    background-image: -moz-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
    background-image: -webkit-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);
    background-image: -ms-linear-gradient(bottom, #363636 19%, #1A1A1A 53%, #000000 80%);

    -webkit-transition-property: c0c0c0;  
    -webkit-transition-duration: 300ms;  
    -moz-transition-property: c0c0c0;  
    -moz-transition-duration: 300ms;
    margin-top: -8.3em;
    position: fixed;
    }   

}  

ul {  
    margin-left: -18px;  
    padding: 0;
    position: fixed;
    width: 100%;


}  

ul.menu {  
    height: 30px;  
    border-left: 0px solid ;  
    border-right: 0px solid ;
    float:left; 


    padding:0;
}  

ul.menu li {  
    display:inline-block;
    list-style: none;
    float:left;  
    height: 30px;  
    text-align: center;  

    }  



ul li a:hover {  
    background: #000000;  
}  

Answer 1

Try doing something like this…

I am thinking the reason your buttons don’t show up on width 100% is because you need to display your <li> as block or inline-block, and because your markup isn’t quite right.

.menu {  
    margin-left: -18px;  
    padding: 0;
    position: fixed;
    width:100%;
}

.menu li {
    display:inline-block;
    float:left;
}

And then as Kwon mentioned.. Your HTML should be like this…

<ul class="menu">  
    <li><a href="/wordpress/">Home</a></li>
    <li><a href="/wordpress/">About</a></li>
    <li><a href="/wordpress/">Blog</a></li>
    <li><a href="/wordpress/">Services</a></li>
    <li><a href="/wordpress/">Portfolio</a> </li>
    <li><a href="/wordpress/">Contacts</a></li>
</ul>