How to move all li elements to the left side of the <ul> element?

Question

I want to move all li elements to the left side of the ul element. It looks like the first li element has a left margin >0 which I don't understand.

Do you know how I can fix this?

The ultimate goal is: the first li element #music and #email element in the footer have the same left margin of 70px (same distance from the left border).

 html, body { margin: 0; text-align: center; } header { overflow: hidden } nav { overflow: hidden; display: inline-block; float: left; margin-left: 70px; } nav li { margin-right: 70px; float: left; } nav ul { list-style: none; overflow: hidden } #email { float: left; padding: 25px 0px; margin-left: 70px; } .wrapper { border: 2px solid green; } #menu2 { float: right; margin-right: 70px; border: 2px solid green; } ul { margin-top: 0px; margin-bottom: 0px; } 

 <div class="wrapper"> <header> <nav id="menu"> <ul> <li id="music"> <a href="#"><img src="gfx/music40.gif"></a> </li> <li id="film"> <a href="#"><img src="gfx/film40.gif"></a> </li> <li id="visual"> <a href="#"><img src="gfx/visual40.gif"></a> </li> <li id="media"> <a href="#"><img src="gfx/media40.gif"></a> </li> </ul> </nav> <div id="menu2"> <a id="logo" href="index.html"><img src="gfx/tobera40.gif" alt="logo" class="logo"></a> </div> </header> <div id="main"> <img src="gfx/banner40.jpg"> </div> <footer> <div id="email"> <img src="email.jpg"> </div> </footer> </div> 

Answer 1

The padding on the ul pushes your li items over to the right. Since #email and nav are both indented 70px the only difference is the padding on the ul. Try adding:

ul {
    padding: 0;
}

Answer 2

您可以在ul元素上添加padding: 0 ，以强制其粘贴到父级nav元素的左边框。

Answer 3

First of all you are missing closing on div id='wrapper'.

Second this is my advice for formating ur CSS - Never write class or id then after opening brackets you put values beneeth it.

Like this

 ul{
  margin-top:0px;
  margin-bottom:0px;
  }  

Its much better for you to use some spaces and to be constant in it.. like 4x spaces after ul element - Like this :

ul {
    margin-top:0px;
    margin-bottom:0px;
}

Also ur UL dont need to have margin-top: 0 its just better to put top:0 if u dont want any space between body and nav bar...

U have a lot of mistakes but practice makes u pefect.

HTML code is formated nicely. Also i suggest you to write comments in CSS and also sometimes in HTML. Because with big page you will forget what you are doing and were.

overflow:hidden -- this overflow missing ;

Sorry for my english. Just close div element with id='Wrapper', thats all:)