dropdown menu exceeds container width

Question

I'm trying to create a dropdown menu. The problem is that my dropdown menu width exceeds container width. As far as i can see i have no margins or something similar.

CSS

#wrapper {
    width: 1020px;
    height: 1500px; 
    background-color: #CCC;
}
#wrapper1 {
    height: 40px;
    width: 100%;    
    position: relative; 
    color: #FFF;
    font-family: Roboto;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: bold;
    background-color: #FFF;
}
.dropdown-menu {
    color: #fff;
    list-style-type: none;
    position: relative;
    background-color: #1a1b20;
    height: 40px;
    width: 100%;
    font-family: Roboto;
    float: left;
    font-weight: bold;  
}
.dropdown-menu > li{
    position: relative;
    float: left;
    line-height: 40px;
    width: 340px;
    text-align: center;
    }

HTML

<div id="wrapper">
    <div id="wrapper1">
        <ul class="dropdown-menu"> 
            <li>A</li>       
            <li>B</li>
            <li>C</li>
        </ul> 
    </div>
</div>

Any idea?

Answer 1

Your ul with class dropdown-menu has default padding/indent that pushes the content out of the container.

Add this css rule to your .dropdown-menu:

padding: 0;

Try it in the snippet:

#wrapper {
    width: 1020px;
    height: 1500px; 
    background-color: #CCC;
}
#wrapper1 {
    height: 40px;
    width: 100%;    
    position: relative; 
    color: #FFF;
    font-family: Roboto;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: bold;
    background-color: #FFF;
}
.dropdown-menu {
    color: #fff;
    list-style-type: none;
    position: relative;
    background-color: #1a1b20;
    height: 40px;
    width: 100%;
    font-family: Roboto;
    float: left;
    padding: 0;
    font-weight: bold;  
}
.dropdown-menu > li{
    position: relative;
    float: left;
    line-height: 40px;
    width: 340px;
    text-align: center;
    }

<div id="wrapper">
    <div id="wrapper1">
        <ul class="dropdown-menu"> 
            <li>A</li>       
            <li>B</li>
            <li>C</li>
        </ul> 
    </div>
</div>