Why do child divs extend beyond their parent div?

Issue

I feel stupid asking this but this is a very simple problem that don’t understand how to solve. In the code below, why are the container, main, and secondary divs extending beyond the header? I understand that it’s occurring because of the padding I’ve assigned to the container but I’ve assigned a max-width to the html element. The header element is obeying that maximum width but the container and its child divs aren’t. I’ve looked at similar questions here but didn’t see anything that I thought pertained to my particular situation. What’s going on here?

Thanks.

enter image description here

test.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Test</title>
    <link rel="stylesheet" href="../reset.css" />
    <style type="text/css">
        html {
            max-width: 960px;
            margin: 0 auto;
            position: relative;
        }
        header { 
            height: 2.5em;
            background: #2a3744; 
            color: #fff;
        }
        body {
            font-size: 100%;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
        .container {
            width: 100%;
            padding: 1em;
            margin: 0 auto;
            background: #ccc;
        }
        .main { background: #cf6; }
        .secondary { background: #fc6; }
    </style>
</head>
<body>
    <header role="banner">
        header
    </header>
    <div class="container">
        <div class="main">
            main           
        </div>
        <div class="secondary">
            secondary
        </div>
    </div>
</body>
</html>

Solution

The padding: 1em on the container together with the width:100% makes the actual width 100% + 2em.

You should add box-sizing: border-box; to .container to make sure that the width is 100% (example).

Answered By – Rob W

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.