空白和邊距導致我的div太寬

我有這個div：空白和邊距導致我的div太寬

<!------ CONTENT ------> 
<div id="content"> 
    <div class="top"> 
    I am cool<br /> 
    I am cool<br /> 
    I am cool<br /> 
    I am cool<br /> 
    </div> 
</div> 
<!------ /CONTENT ------>

有了這個CSS：

#content{ 
    height:auto; 
    width:100%; 
    background-color:#FF0000; 
} 

#content .top{ 
    margin:15px 35px 35px 35px; 
    padding:20px; 
    width:inherit; 
    height:inherit; 
    position:absolute; 

    -moz-box-shadow: 5px 5px 10px rgba(0,0,0,.8), inset 2px 2px 2px rgba(0,0,0,.2), inset -2px -2px 3px rgba(255,255,255,.85); 
    -webkit-box-shadow: 5px 5px 10px rgba(0,0,0,.8), inset 2px 2px 2px rgba(0,0,0,.2), inset -2px -2px 3px rgba(255,255,255,.85); 
    box-shadow: 5px 5px 10px rgba(0,0,0,.8), inset 2px 2px 2px rgba(0,0,0,.2), inset -2px -2px 3px rgba(255,255,255,.85); 

    -moz-border-radius: 5px; 
    border-radius: 5px; 
    background-color:rgba(224,224,224,.92); 
}

我認爲這將使得內容的div一樣寬的瀏覽器窗口，然後調整.top div以適應其內部，同時也有填充和邊距（不知道如何解釋，以及），但事實並非如此。相反.TOP是一樣寬屏幕，但由於利潤率的它延伸到的地方窗外，然後又增加了利潤率使其有一個水平滾動條，就像這樣：

Screenshot