content isn't centered, I don't know why?

Question

my site does not look like his.   It stays justified to the left, and is not centered and 'fluid' when I change browser width.
here is my css code:
/* ================================= 
  Base Element Styles
==================================== */
{
box-sizing: border-box;
}
body {
    line-height: 1.6;
    color: #3a3a3a;
}
a { 
    color: #fff;
    text-decoration: none;
}
/* ================================= 
  Base Layout Styles
==================================== */
/* ---- Navigation ---- */
.name {
  margin: 0;
}
/* ---- Layout Containers ---- */
.container {
  padding-left: 1em;
  padding-right: 1em;
}
.main-header {
    background: #3acec2;
  padding: 1em 0;
}
.main-footer {
  text-align:center;
    padding: 2em 0;
    background: #d9e4ea;
}
/* ---- Page Elements ---- */
/* ================================= 
  Media Queries
==================================== */
@media (min-width: 769 px) {
  .container {
    width: 70%;
    max-width: 1000px; 
    margin: 0 auto;
  }
}

Gergely Bocz · Accepted Answer

Hi Amy!
There is a small typo in your media query. There is an unneeded space between 769 and px. This makes the media query  invalid. In the dev tools you can check that there is no media query rule!
Your media query condition should look like this: 
CSS
@media (min-width: 769px)

and NOT like this:
CSS
@media (min-width: 769 px)

As a side note: I think the header looks nicer, if there is a small padding on the sides, so i would change the heading's padding to this:
CSS
.main-header { background: #3acec2; padding: 1em; }

I hope i could help!
Good luck!

Welcome to the Treehouse Community

Looking to learn something new?

Amy Tomey

Amy Tomey

content isn't centered, I don't know why?

1 Answer

Gergely Bocz

Gergely Bocz