overflow hidden not working

Question

<div style="overflow:hidden;margin-top:37px;background color:#06A1FF;height:130px;width:100%;border-bottom:1px solid black;padding-top:20px;padding-left:20px">

For some reason, the overflow:hidden doesn't seem to work as it keeps producing horizontal scrollbars.

Please help me.

Answer 1

The reason the overflow setting is not working is because overflow handles the overflow of the content, not that of the element itself.

So choose bookcasey's answer and add margin-left: -20px, or add overflow: hidden to the parent element.

Answer 2

Add margin-left:-20px;, currently the width of the div is 100% + 20px because of the padding.