CSS CSS Layout Basics CSS Layout Project Column Layout with Media Queries

Wadzanai Mufunde
PRO
Wadzanai Mufunde
Pro Student 9,174 Points

My columns won't work correctly.

I believe I've written the code correctly. Maybe I haven't. My output is wrong though. What I end up getting is everything on one column floated to the left, with a huge blank on columns 2 and 3. How do I fix this please?

@media (min-width: 769px) {

    .container {
        width: 90%;
        margin: 0 auto;
    }

    .name 
    .col {
        float: left;
    }

    .primary,
    .secondary {
        width: 50%;
    }

    .main-nav {
        float: right;
    }

    .main-nav li {
        display: inline-block;
        margin-left: 15px;
    } 

    .tagline {
        font-size: 1.4em;
    }


    /* ---- Float clearfix ---- */

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

}

@media (min-width: 1025px) {

    .container {
        width:  80%;
        max-width: 1150px;
    }

    .primary {
        width: 40%;
    }

    .secondary,
    .tertiary {
        width: 30%;
    }
}

1 Answer