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 Getting Started with CSS Layout Creating a Layout Wrapper

Posted by Kenandrae Wheatt
Kenandrae Wheatt
3,944 Points

body wrapper doesn't work in chrome

when I use width and margin to create a wrapper for the body tag. The styling isn't reflected in chrome but it does work in Firefox.

Jacob Mishkin
Jacob Mishkin
23,117 Points

can you please post your code for the wrapper so we can see what the issue is.

Kenandrae Wheatt
Kenandrae Wheatt
3,944 Points 
body {
    line-height: 1.6;
    color: #3a3a3a;
  width: 70%;
  margin: 0 auto;
}

a { 
    color: #fff;
    text-decoration: none;
}

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

/* ---- Layout Containers ---- */
.wrapper{
   width: 70%;
  margin: 0 auto; 
}

.main-header {
    background: #3acec2;
}

.main-footer {
    padding: 2em 0;
    background: #d9e4ea;
}

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

3 Answers

Jacob Mishkin
Jacob Mishkin
23,117 Points

I see two things that might be an issue,

  1. your body and wrapper div are the same width.
  2. You applied a color property to the body not a background color.

There is a possibility that this is the issue.

Diamond Black
Diamond Black
5,942 Points
Diamond Black
Diamond Black
5,942 Points

Same thing happening to me now. When I put the width and margin setting with the body it works fine. If i use this code, the class wrapper does not center my content. Any reason why? Using chrome btw

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

body {
    line-height: 1.6;
    color: #3a3a3a;
}

a { 
    color: #fff;
    text-decoration: none;
}

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

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

.wrapper {
  width: 70%;
  margin: 0 auto;
}

.main-header {
    background: #3acec2;
}

.main-footer {
    padding: 2em 0;
    background: #d9e4ea;
}

/* ---- Page Elements ---- */
Ashvin Mbuguni
Ashvin Mbuguni
6,360 Points
Ashvin Mbuguni
Ashvin Mbuguni
6,360 Points

mine doesnt work either on chrome;

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

body { line-height: 1.6; color: #3a3a3a; }

a { color: #fff; text-decoration: none; }

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

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

.wrapper { width: 70%: margin: 0 auto; }

.main-header { background: #3acec2; }

.main-footer { padding: 2em 0; background: #d9e4ea; }

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

Brian Pritt
Brian Pritt
3,741 Points

You have a colon rather than a semi-colon after the width value in .wrapper .