Question

I am using the following CSS code to stretch an element (<header> in this example) so that it fits the browser window width:

header {
    font-size: small;
    color: white;
    overflow: auto;
    background-color: rgba(51, 51, 51, .8);
    padding: 3px 3px;
    width: 100%;
}

but the problem is that this element, or any to which I apply width: 100%; overflow: auto; overflows the window limits:

| <--- window width ---> |
|  <--- element width ---> |

How can I set the CSS properties so that the element width fits exactly the window width?

| <--- window width ---> |
| <--- element width --> |

Answer 1

Remove your padding. Adding padding adds additional width. So, your statement is like saying “make it 100% wide, but then add 6px.

If you want it to be fullscreen WITH padding, make it fullscreen, then add a div within it that has the padding.