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 Basics CSS Layout Project Column Layout with Media Queries

Jane Marianne Filipiak
Jane Marianne Filipiak
7,444 Points
Posted by Jane Marianne Filipiak
Jane Marianne Filipiak
7,444 Points

clearfix isn't working

hello, I have had some trouble with the layout challenge in CSS Layout Basics course. I have checked several times why my workspace doesn't show a perfect layout like Guil's. I have entered the clearfix property into the html page, and can only think that I have missed something on the CSS page. Any help is greatly appreciated! Jane

/* ================================= 
  Base Element Styles
==================================== */

* {
    box-sizing: border-box;
}

body {
    font-family: 'Varela Round', sans-serif;
    line-height: 1.6;
    color: #3a3a3a;
}




p {
    font-size: .95em;
    margin-bottom: 1.8em;
}

h2,
h3,
a {
    color: #093a58;
}

h2,
h3 {
    margin-top: 0;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;
}

/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Navigation ---- */

.name {
    font-size: 1.25em;
  margin: 0px;
}

.main-nav {
  margin-top: 5px;
}
.name a,
.main-nav a {
    text-align: center;
  display: block;
  padding: 10px 15px;
}

.main-nav a {
    font-size: .95em;
    color: #3acec2;
    text-transform: uppercase;
}

.main-nav a:hover {
    color: #093a58;
}

/* ---- Layout Containers ---- */

.main-header {
  padding-top: .5em;
  padding-bottom: .5em;
}

.banner,
.main-footer {
  text-align: center;
}

.banner {
    color: #fff;
    background: #3acec2;
  text-align: center;
  padding: 3.2em 0;
  margin-bottom: 60px;
}

.main-footer {
    background: #d9e4ea;
    padding: 2em 0;
    margin-top: 30px;
  text-align: center;
}

.col {
  padding-right: 1em;
  padding-left: 1em;
  vertical-align: top;
}


/* ---- Page Elements ---- */

.logo {
    width: 190px;
}

.headline {
  margin-bottom: 0px;
}


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

@media (min-width: 769px){

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

.name,
.col{
  float: left;
}

main-nav {
  float: right;
}

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

.tagline {
  font-size: 1.4em;
}

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


    /* ---- 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%;
}

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

4 Answers

Craig Watson
Craig Watson
27,930 Points
Craig Watson
Craig Watson
27,930 Points

Hi Jane,

I am noticing that on the main-nav class selector you have missed off your . please see below.

/* Current Styles */
main-nav {
  float: right;
}

/* Needs to be changed to */
.main-nav {
  float: right;
}

If this does not fix the issue can you provide a snapshot of your workspace please.

Hope this helps! Craig

Sebastien Gabriel
Sebastien Gabriel
8,229 Points
Sebastien Gabriel
Sebastien Gabriel
8,229 Points

Hi Jane,

Shouldn't it be ' .clearfix:after ' instead of ' .clearfix::after ' ( without double "::")

Hope it helps, Sebastien

Craig Watson
Craig Watson
27,930 Points

Hi Sebastien,

unfortunately the :: or : do not have any adverse effects on the code. The best practice in this case, for sudo-elements is the ::.

Craig

Sebastien Gabriel
Sebastien Gabriel
8,229 Points
Sebastien Gabriel
Sebastien Gabriel
8,229 Points

Oh didn't knew that, thanks for your comment. Seems like I failed my first attempt to help but at least I tried and learned something! See you around,

Sebastien

Craig Watson
Craig Watson
27,930 Points

There is no such thing as a failed attempt at helping someone out, we are all learning and working together.

You were kind enough to reach out, keep it up!

Craig

Jane Marianne Filipiak
Jane Marianne Filipiak
7,444 Points
Jane Marianne Filipiak
Jane Marianne Filipiak
7,444 Points

Sebastien and Craig,

Many thanks for your help. It still remains a mystery though, because even after correcting to .main-nav, the margins are still collapsing. I will just move on, and take a break from this problem.

Best regards, Jane