Little gap in a menu although margin and padding 0

Question

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 1

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;
   }

Answer 2

you could also use flexbox see fiddle https://jsfiddle.net/f76vdyxe/

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) {
  nav ul{
    margin: 0;
    padding: 0;
    display: flex;
  }
#main{
    max-width: 800px;
    height: auto;
    left:0%;
    margin:0px;
}

#menu{
    position:absolute;
    display:block;
    float:left;
    width:100%;
    background-color:green;
    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;
    background-color:red;
    
    flex: 1;

} 
}

<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>

Answer 3

There's a good chance what you're seeing is the default stylesheet embedded in the browser. You should generally reset your stylesheets by using this at the beginning of your CSS file. This resets all pre-defined paddings/margins etc to 0.

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/*============ END OF RESET =================*/

I've a feeling this is related to your problem. It's worth trying it out.

Answer 4

I'm not sure if i understood correctly but maybe this is what you are searching for:

#menu ul {
  margin: 0px;
  padding-left: 0px;
}

Answer 5

You were trying to make the menu as position :absolute and each li as relative and making them as display:block(float:left) ,you need not do that all. Float:left makes element display:block.

Instead of all this, you can consider using display:flex for the layout instead of floats.

Flexbox is responsive too.

check the following snippet

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;
  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 {
    width: 100%;
    background-color: green;
    height: 60px;
    padding: 10px;
    margin: 0px;
    position: relative;
    left: 0px;
    top: 0px;
  }
  #menu ul {
    display: flex;
    justify-content: space-between;
  }
  #menu li {
    list-style: none;
    cursor: pointer;
    background-color: red;
  }

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link href="css/mobile.css" rel="stylesheet" type "text/css">
</head>

<body>
  <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>
</body>

</html>