Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS CSS Layout Techniques Float Layout The Float Clearfix

Posted by Jay Valentine
Jay Valentine
Courses Plus Student 4,389 Points

Why is mine different to Guil's?

My preview of the site doesnt look like Guil's at the end? (The Header i'm on about, i.e. Logo and Nav) this is my CSS, im unsure why its not the same as Guil's as ive followed all instruction? hmm

/* Page Styles
================================ */

* {
    box-sizing: border-box;
}
html,
body{
    height: 100%;
}
body {
    font: normal 1.1em/1.5 sans-serif;
    color: #222;
    background-color: #edeff0;
}

/* Layout Element Colors
================================ */

.main-header       { background-color: #384047; }
.main-logo a       { background-color: #5fcf80; }
.main-nav a       { background-color: #3f8abf; }
.primary-content   { background-color: #caebf6; }
.secondary-content { background-color: #bfe3d0; }
.main-footer       { background-color: #b7c0c7; }

/* Main Layout Styles
================================ */
.main-logo, .main-nav, .main-nav li {
    float:left;
}
.main-logo {
    margin: 0 50px 0 0;
}
.main-wrapper {
    width: 90%;
    margin: auto;
}
.main-header {

    padding: 15px;
}

.main-logo a,
.main-nav a {
    display: block;
    color: white;
    text-decoration: none;
    text-align: center;
    padding: 5px 15px;
    border-radius: 5px;
}
.main-banner {
    background: #dfe2e4;
    text-align: center;
    padding: 35px 15px;
}
.main-footer {
    text-align: center;
    padding-top: 5px;
    padding-bottom: 5px;
}
.main-nav li {
    margin-top: 15px;
    margin-right: 10px;
    margin-left: 10px;
}

}
/* Column Layout
================================ */

.col {
    padding: 20px;
}


/* Clearfix
================================ */

.group::after {
    content: " ";
    display: table;
    clear: both;
}


/* Media Queries
================================ */

@media (max-width: 768px) {
    .main-wrapper,
    .main-nav li,
    .main-logo {
        width: initial;
        height: initial;
        float:initial;
}
.main-logo {
    margin-right:0;
}


.extra-content {
        display: none;
    }

}
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

if you put the language next to the opening three ` it will format properly. It will also often point out errors in the syntax.

2 Answers

Andrew Robinson
Andrew Robinson
16,372 Points
Andrew Robinson
Andrew Robinson
16,372 Points

If you followed along with the video like I did, the reason I discovered why the nav items don't change when it's less than 768px width is because we floated the nav left, but didn't re-initialize it in our media query.

So all you need to do is add .main-nav to the media query and it will reset the float and fix the nav display.

@media (max-width: 768px) {
    .main-wrapper,
    .main-nav,
    .main-nav li, 
    .main-logo {
        width: initial;
        height: initial;
        float: initial;
    }
    .main-logo {
        margin-right: 0;
    }
    .extra-content {
        display: none;
    }
}
Ted Sumner
PLUS
Ted Sumner
Courses Plus Student 17,967 Points
Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

you have an extra } just before your column section.

Jay Valentine
Jay Valentine
Courses Plus Student 4,389 Points

Still doesnt explain why my nav wont stretch across like my logo element, but thanks ahha!

Ted Sumner
Ted Sumner
Courses Plus Student 17,967 Points

Please post your html also.