CODEWITHSUNDEEP
htmlcss
renata costa
renata costa

Reputation: 177

Menu fixed li width 100%

I have a menu fixed on top of my page. My problem is the li. It is not getting 100% width. There is a margin left on the first li (LOGO) and the second li (login) text is somewhere else, but not in my page.

What is wrong with my menu?

https://jsfiddle.net/c96742fu/

CSS

#menu {
 display:table;
 background-color: #000;
 position:fixed;
 width:100%;
 top:0;
 margin:0;
 color: #fff;
 text-align: center;
 height:45px;
 z-index:100;
 box-shadow: 0px 0px 1px 1px #999;
}
#menu a:link, #menu a:visited, #menu a:hover{
 color: #fff;
}
#menu ul{
 width:100%;
 list-style-type: none;
}
#menu li{
 text-align:left;
 display: table-cell;
 width:50%;
 border:1px solid yellow;
}
.right{
 text-align:right !important;
}

HTML

<ul id=menu>
<li><a href=/index.php>LOGO</a></li>
<li class=right>login</li>
</ul>

Upvotes: 0

Views: 89

Answers (2)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167182

You have a default padding for the <ul>. Try this to fix it:

#menu {padding: 0;}

Fiddle: https://jsfiddle.net/c96742fu/1/

For better results, try adding a universal reset as said by everyone:

* {margin: 0; padding: 0; list-style: none;}

Upvotes: 4

Thibault
Thibault

Reputation: 137

Try to add 

* {
padding: 0;
margin: 0;
}

to reset default css.

https://jsfiddle.net/c96742fu/

Upvotes: 0

Related Questions