Anthony Hulett Anthony Hulett - 5 months ago 17
CSS Question

HTML / CSS Padding for <section> isn't working

screenshot of problemThe padding in the section that will contain the content of the page goes from end to end with no space from the edge.

HTML:

<section>
<heading>
<h2>Welcome to Funky Munky!</h2>
</heading>
<article>
<p>
New in Cedar City, UT
</p>
</article>
</section>


CSS:

section {
width: 100%;
margin: 1% 0;
padding: 2%;
background-color: #f5c300;
opacity: 0.7;
color: #000;
text-align: center;
}

Answer

Use box-sizing: border-box :

section {
    width: 100%;
    margin: 1% 0;
    padding: 2%;
    background-color: #f5c300;
    opacity: 0.7;
    color: #000;
    text-align: center;
    box-sizing: border-box;
}

Without that, the 2% padding on each side is added to the 100% width of the box, so it has a total width of 104% and is thus larger than the page.

Update

Since you've posted an image of the problem, it seems that you want some spacing between the edge of the page and the box itself. Is that correct?

If it is, change the margin to margin: 1% instead of margin: 1% 0. Then, change the width to 98% (100% - 1% on each side).

As you have it set now, there's a 1% margin above and below the element, but no margin to the left and right of it.

The padding is for the inner spacing (spacing between the edges of the box and the content inside it), margin is the space between the edge of the box and the other elements outside.

Comments