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 Creating and Styling the Layout Containers

Maya Liberman
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Maya Liberman
Full Stack JavaScript Techdegree Graduate 26,360 Points

Whay my nav is not centered?

/* ================================= 
  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: 0;
  float: left;
  padding-top: 10px;
  margin-left: 25px;
}

.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;

}

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

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

.main-footer {
    background: #d9e4ea;
    padding: 2em 0;
  display: block;
    margin-top: 30px;
}

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

.logo {
    width: 190px;
  display: block;
  margin: auto;
  padding-top: 40px;

}

.headline {
margin-bottom: 0;
}



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

@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;

}


.col {
  display: block;
  width: 100%;



    }


.feat-img {
        width: 300px;
        float: left;
        margin-top: 5px;
        margin-right: 25px;
        margin-bottom: 25px;
        padding: 10px;
        border: solid 1px #d9e4ea;
    }

.main-footer {

display: block;
  margin: auto;
  width: 100%;
  border: 1px;
}


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

}
Maya Liberman
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Maya Liberman
Full Stack JavaScript Techdegree Graduate 26,360 Points
/* ================================= 
  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: 0;
  float: left;
  padding-top: 10px;
  margin-left: 25px;
}

.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;

}

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

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

.main-footer {
    background: #d9e4ea;
    padding: 2em 0;
  display: block;
    margin-top: 30px;
}

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

.logo {
    width: 190px;
  display: block;
  margin: auto;
  padding-top: 40px;

}

.headline {
margin-bottom: 0;
}



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

@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;

}


.col {
  display: block;
  width: 100%;



    }


.feat-img {
        width: 300px;
        float: left;
        margin-top: 5px;
        margin-right: 25px;
        margin-bottom: 25px;
        padding: 10px;
        border: solid 1px #d9e4ea;
    }

.main-footer {

display: block;
  margin: auto;
  width: 100%;
  border: 1px;
}


    /* ---- 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

Bogdan Cabaj
Bogdan Cabaj
16,349 Points

Hi Maya,

CSS looks good but it looks like you have pasted it twice instead of pasting HTML. You have much more code in css compared to what they have in the video as well. Please attach your HTML as we can take a look.