Remove extra white space at the left of ul element

Question

I want to remove extra white space at the left of li elements but don't know how to do it.Although my margin and padding of ul is 0 but still there is some extra space at left.Please help! Here is the image:

HTML:

<div class="menu">
    <div class="container">
            <!-- menu icon -->
            <div class="icon-close">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>
            </div>

        <!-- menu -->
        <ul>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">BLOG</a></li>
            <li><a href="#">HELP</a></li>
            <li><a href="#">CONTACT</a></li>
        </ul>

    </div>
</div>

CSS:

.menu {
  background: #202024 url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/uber/black-thread.png') repeat left top;
  left: -285px;  /* start off behind the scenes */
  height: 100%;
  position: fixed;
  width: 285px;
}

.menu ul {
    list-style: none;
    margin: 0;
    padding: 0;

}

.menu li {
    border-bottom: 1px solid #636366;
    font-family: 'Open Sans', sans-serif;
    line-height: 45px;
    padding-bottom: 3px;
    padding-left: 20px;
    padding-top: 3px;
    width: 270px;
}

Answer 1

add margin: 0; to .menu li - that should fix it (or at least margin-left: 0 )

Answer 2

Consider setting padding-left:0 explicitly in your CSS as follows:

.menu li {
    border-bottom: 1px solid #636366;
    font-family: 'Open Sans', sans-serif;
    line-height: 45px;
    padding-bottom: 3px;
    padding-left: 0; // <-- make sure to set this
    padding-top: 3px;
    width: 270px;     
}

Answer 3

try to style your container with

.container{
    padding:0;
}

Answer 4

Edit:

I think the only one to understand your question was nonstop328 . My answer is to make the text line up with the border-bottom on the list element, which is what I thought you wanted. I'll leave it here in case it helps you debug problems like this in the future, but consider marking the other answer as accepted.

---

Since the other answers and your comments suggest that removing padding-left and margin-left from .menu li (or explicitly setting it to 0 ) does not work, we only have 2 other possibilities.

1. You have padding-left and/or margin-left set on .menu li a . In which case, either remove that or explicitly set it to 0 .
2. You have an !important flag set on the margin or padding somewhere else and commenting it out or even using your browser's developer console may make you think you have removed it, but in fact you have not.
   
   To find out if this is the case here is how you can do it in Chrome (FF is probably almost the same):
   • Right click on the element in the page and click on "Inspect element".
   • Click on the correct element in the DOM frame.
   • In the other frame make sure styles is selected. Click on the word filter and in there type in margin or padding and it will filter out all the CSS rules that add those attributes to the element.
   • Uncheck all rules with a non-zero margin-left, margin, padding-left or padding.
   • Wash, rinse and repeat for both of these CSS rules and both the <li> and <a> elements.

You can also get a visual representation of what is going on. In the DOM frame hover your mouse over both the <a> tag and the <li> tag. You will notice that the background for that element changes color. Blue is for the actual dimensions of the content of the element, green is for padding and orange is for margin. Like this:

In this example I have added a margin-left of 25 and padding-left of 20.