<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.
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.