DrSheldonTrooper DrSheldonTrooper - 11 days ago 6
CSS Question

Little gap in a menu although margin and padding 0

I've a problem: I want to create a responsive menu but in the mobile mode there is something like

margin-left
and
margin-top
and I don't know how to delete these gaps.
Here's my code:



body{
font-family: "Verdana", Geneva, sans-serif;
background-color: white;
margin: 0px;
font-size: 100%;
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
}

#main{
max-width: 800px;
height: auto;
background-color:#FF9;
overflow: hidden;
margin: 0px auto;
}

#menu{
width:20%;
background-color:#09F;
float: left;
text-align: center;
line-height: 20px;
}

#menu a {
text-decoration: none;
-webkit-transition: color .3s ease-in-out;
-moz-transition: color .3s ease-in-out;
-o-transition: color .3s ease-in-out;
-ms-transition: color .3s ease-in-out;
transition: color .3s ease-in-out;
}

#menu a:hover{
color: red;
text-decoration:underline;
}

@media screen and (max-width: 800px) {
#main{
max-width: 800px;
height: auto;
left:0%;
margin:0px;
}

#menu{
position:absolute;
display:block;
float:left;
width:100%;
background-color:green;
height: 60px;
padding:0px;
margin:0px;
left:0px;
top:0px;
}

#menu li{
box-sizing: border-box;
position:relative;
list-style: none;
float: left;
cursor: pointer;

display: block;
width: 120px;
height:30px;
background-color:red;

}
}

<nav id="menu">
<ul>
<li><a href="#">Link1</a></li>
<li><a href="#">Link2</a></li>
<li><a href="#">Link3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#">Link5</a></li>
</ul>
</nav>





Does someone know where I made a mistake?

Answer

ul has default indent value

ul{
   margin-left:20px;
  }

To avoid this conflict you have to write this code on top of your css

*{
  margin:0;
  padding:0;// Padding also took some indent. You can use if it was requires
 }

or write like this

 ul{
    margin-left:0;
   }