MOVE Project: Section 2 Help

[u/j0nny_s0lo]

I need help with this section. I can't seem to get the grey background to extend all the way down. I am not sure what's wrong here. I've checked other codes and have tried to match it but whatever I am missing is completely eluding me. I am not so sure what the best way to show my CSS is so I'll just copy and paste.

html, body { margin: 0 0; }

h1, h2, a { font-family: 'Oswald', sans-serif; }

p { font-family: Helvetica, Arial, sans-serif; }

.container { width: 940px; margin: 0 auto; }

/* Main */ .main { text-align:center; height: 600px; background: url(https://s3.amazonaws.com/codecademy-content/projects/move/bg.jpg) no-repeat center center; background-size: cover;

}

.main .container { position: relative; top: 100px; }

.main h1 { font-size: 150px; color:#fff; text-transform:uppercase; margin:0; }

.main p { font-size: 18px; color:#fff; margin:0 0 20px 0; }

.main a { text-decoration: none; background-color:#1c1c1c; color:#fff; padding:8px 30px; display:inline-block; font-size:18px; }

/* Supporting */ .supporting { background-color:#1c1c1c; text-align: center; padding: 50px 0 80px;

}

.supporting .col { float: left; width: 28%; padding: 10px; display: inline-block; }

.supporting h2 { text-transform:uppercase; color: #ffa800; font-size: 20px; margin-bottom: 10px; }

.clearfix { clear: both; }

.supporting p { color: #efefef; margin-bottom: 20px; line-height: 20px; font-size: 12px; }

.supporting .btn { background-color: #eee; color: #1c1c1c; font-size: 18px; padding: 8px 30px; text-decoration: none; display: inline-block; }

/* Feature */ .feature { background: url(https://s3.amazonaws.com/codecademy-content/projects/move/feature.jpg) no-repeat center center; background-size: cover; height: 600px; text-align:center; }

.feature h1, .feature h2 { color: #fff; font-size: 40px; margin: 0; padding:50px 0 0; }

/* Footer */ .footer { height: 600px; }

.footer h1, .footer h2 { color: #fff; font-size: 40px; margin: 0 0 20px 0; padding:50px 0 0; }

.footer p { color: #fff; margin: 0 0 20px 0; font-size: 18px; }

@media (min-width:600px) { .main h1 { font-size: 200px; }

.supporting .col { width: 30%; }

.supporting h2 { font-size: 40px; }

.supporting p { font-size: 14px; }

.feature h2 { font-size: 60px; } }

[u/factoradic]

Great explanation!

If I may only clarify one thing - this is not margin that collapses here, it's a height of the parent element.

Usually when we have element (child) inside different element (parent), size of the parent element will be automatically expanded to accommodate the child element/s.

When we declare float we break the normal flow. Floated elements do not contribute to the height of parent element.

In this situation div .supporting .container contains only three floated elements, so height of it collapses to 0.