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

Question

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 a good 30px. Could someone explain why?

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"&gt;Stress Causes Addiction</a> 
</li> 
</ul> 
</div> 

Answer 1

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.

Answer 2

Make sure the ul does not have padding and margin of its own, by resetting it with padding:0;margin:0;

Answer 3

The ul has a margin and padding set it on by the browser. You'll want to remove this:

div.textmenu ul {margin:0;padding:0;}

Only the padding affects the width, but you'll probably want to take off the margin too.

Answer 4

Its like smeridan said. There are for all html elements preset styling properties.

I recommend you to use the reset css by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/

You can include it at the top of your document. After that you have more control about your desired styling.