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

Posted by brandonlind2
brandonlind2
7,823 Points

why isn't my clear fix working?

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

<section class="main-products clear">
Sander de Wijs
Sander de Wijs
Courses Plus Student 22,267 Points

Maybe the cause is somewhere in your HTML structure. Can you post the parent HTML elements of the main-product element as well just to have the whole picture?

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Is your clear class at the end of your CSS file? It might be that something else is overwriting it. That's sort of the beauty and the beast with CSS :)

brandonlind2
brandonlind2
7,823 Points

yup its at the end of the stylesheet, not working for some reason

html {
    width: 1000px;
    font-size: 1em;
}

img {
    max-width: 100%
}

* {
    box-sizing: border-box;
}

body { background-color: orange;
        padding: 0;
    margin: auto;
        max-width: 100%;

}

header {
    background-color: lightgrey;
    text-align: center;
    padding: 1px 0 -100px 0;
    margin:  auto;
    max-width: 100%;
}

.main-header-title {
    margin: 0;
    font-size: 3em;
    }

nav { 
    font-size: 1.5rem;
    padding: 0;
    margin: auto;
    max-width: 100%;
}

nav ul{
    border-top: 1px solid lightgrey;
        text-align: center;
    padding: 0;
    margin: 0 auto;
    max-width: 100%;
}

nav li {
    border: 1px solid lightgrey;
    background-color: orange;
    text-align: center;
    padding: 0;
    margin: auto;
    max-width: 100%;
    list-style: none;
}

nav li a { color: white;
       text-decoration: none;
}

nav a:visited {
    color: white;
}   

section {
    margin: auto;
    padding: 0;
    max-width: 100%;
    }

.main-products li {
    text-align: center;
    list-style: none;

    }

footer { 
    clear: both;
    text-align: center;
    margin: auto;
    padding: 0;
    max-width: 100%;
}

footer li { 
    max-width: 100%;
    margin: auto;
    padding: 0;
    list-style: none;
    display: inline-block;
}

footer li a {
    text-decoration: none;
}

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


/************
responsive
************/

@media screen and (min-width: 300px){



}

@media screen and (min-width: 600px){
    .main-header-title {
        text-align: left;
        margin: 5% 10%;
        font-size:
    }

    nav ul {
        margin: 0 5% 0 0;
        text-align: right;
       }
    nav li {
        border-radius: 0 0 0 7px;
        margin: 0 -5px;
        padding: 2px 10px;
        display: inline-block;
}

.main-products li {
    float: left;
    width: 20%;
    margin: 2.5%;   
    }



}