White space in front of ul

This question already has an answer here:

I have an unordered list and is displayed inlined but the problem is that in front of the list appears some white space like in the following image :

SpaceInfront

This is the css :

#ul-right{
  float:right;
}
.li-right{
  display:inline;
  font-size:initial;
}
.ul-leftright{
  font-size: 0px;
}

and this is the html :

<ul id="ul-right" class="ul-leftright">
  <li class="li-right">
  <a runat="server" href="Login.aspx">Login</a>
  </li>
  <li class="li-right">
  <a runat="server" href="LogOut.aspx">Logout</a>
  </li>
  <li class="li-right">
  <a runat="server" href="Register.aspx">Register</a>
  </li>
  <li class="li-right">
  <a runat="server" href="~/Cart/MyCart.aspx">MyCart</a>
  </li>
</ul>

Can you please me tell me why is this happening and can you help me remove the white space ?


solution

That’s the default padding on the ul element. Most browsers add a padding-left value of ~ 40px.

Example Here

ul {
  padding: 0;
}