Search code examples
htmlcssmenuwidthhtml-lists

Why is this ul exceeding the size of it's div?

Although li.textmenu has width: 140px, padding: 5px, and div.textmenu has width: 150px, the one list item i've made so far has a big left margin, and extends beyond the right edge of the div by at least 30px. What could be causing this and how can I restrict it's width?

http://www.briligg.com/frailty.html

CSS

div.textmenu {
  background-color: #3b3b3b;
  float: left;
  width: 150px;
  margin: 30px 10px 0 30px;
}

li.textmenu {
  background-color: #4a4a4a;
  margin: 0;
  padding: 5px;
  border: none;
  width: 140px;
  list-style: none;
  text-align: right;
}

HTML

<div class="textmenu"> 
  <ul> 
    <li class="textmenu">
      <a class="pink" href="http://www.briligg.com/frailty.html#culture">Stress Causes Addiction</a>
    </li> 
  </ul> 
</div>
Solution

  • Did you add a zip/uni reset to the top of your css file?

    * { margin:0; padding:0; }

    ( Put that exactly as is at the very top of CSS to override browser default margins/padding ).

    Most likely the ul is being given default padding/margin, so this is to counter-act it.