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
Travis Johnson
4,990 PointsContent will not center after creating "wrapper" rule.
This is the code I'm currently working with. Nothing shows up as wrong in the console. What could have gone wrong?
/* =================================
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 ---- */
8 Answers
Travis Johnson
4,990 PointsCome to find out it was just the refresh that needed to be done. Even though the browser window was close several times, it seems I also had to refresh it to make the code appear properly.
Melisa Hamilton
11,729 PointsDo you have the class called correctly in the HTML? Everything looks right in the CSS.
Travis Johnson
4,990 PointsHere's my HTML for reference. Thanks for the prompt reply. <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Best City Guide</title> <link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class= "wrapper"> <header class="main-header"> <h1 class="name"><a href="#">Best City Guide</a></h1> <ul class="main-nav"> <li><a href="#">ice cream</a></li> <li><a href="#">donuts</a></li> <li><a href="#">tea</a></li> <li><a href="#">coffee</a></li> </ul> </header>
<h2>Welcome!</h2>
<p>Everything in this city is worth waiting in line for.</p>
<p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
<p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>
<h2>Great food</h2>
<p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum. Marzipan toffee dragée chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
<footer class="main-footer">
<span>©2015 Residents of The Best City Ever.</span>
</footer>
</div> </body> </html>
Melisa Hamilton
11,729 PointsIt looks like you haven't called the wrapper class in your HTML. Try adding a DIV with the class 'wrapper,' around your content.
Travis Johnson
4,990 PointsThat's strange, I've updated the code twice in this post including the DIV. It already exist in the original code underneath <body> with the closing tag appearing under the </footer> .
<body>
<div class= "wrapper">
<header class="main-header">
<h1 class="name"><a href="#">Best City Guide</a></h1>
<ul class="main-nav">
<li><a href="#">ice cream</a></li>
<li><a href="#">donuts</a></li>
<li><a href="#">tea</a></li>
<li><a href="#">coffee</a></li>
</ul>
</header>
<h2>Welcome!</h2>
<p>Everything in this city is worth waiting in line for.</p>
<p>Cupcake ipsum dolor sit. Amet chocolate cake gummies jelly beans candy bonbon brownie candy. Gingerbread powder muffin. Icing cotton candy. Croissant icing pie ice cream brownie I love cheesecake cookie. Pastry chocolate pastry jelly croissant.</p>
<p>Cake sesame snaps sweet tart candy canes tiramisu I love oat cake chocolate bar. Jelly beans pastry brownie sugar plum pastry bear claw tiramisu tootsie roll. Tootsie roll wafer I love chocolate donuts.</p>
<h2>Great food</h2>
<p>Croissant macaroon pie brownie. Cookie marshmallow liquorice gingerbread caramels toffee I love chocolate. Wafer lollipop dessert. Bonbon jelly beans pudding dessert sugar plum. Marzipan toffee dragée chocolate bar candy toffee pudding I love. Gummi bears pie gingerbread lollipop.</p>
<footer class="main-footer">
<span>©2015 Residents of The Best City Ever.</span>
</footer>
</div>
</body>
Adam Thein
3,882 PointsI seem to be having the same issue - I was careful to make my code identical to the video. Also, when I bring up the console in chrome and examine the elements, the <div> element isn't even appearing... Very strange!
Adam Thein
3,882 PointsAHA! I had just taken some JavaScript courses and was re-opening the preview window rather than refreshing. Forcing the browser to refresh seems to have solved my issue. Hope this helps someone!
James Edwards
4,862 PointsI had the same problem was very strange. It was exactly the way the instructor did it. I changed the class name to container instead of wrapper and it worked
Hatem Zreek
7,739 PointsOMG!!! Guys I have the same problem!!! Is normalize.css effecting! I tried everyway but the problem still!!! Any help....
James Castle
Front End Web Development Techdegree Student 9,893 PointsI am having the same problem, when I inspect the css with the DevTools the padding is marked as "Invalid Property Value". It doesn't make any sense to me. Any help appreciated!
Chris Conwell
2,268 PointsTry refreshing your browser after you save changes.
Melisa Hamilton
11,729 PointsMelisa Hamilton
11,729 PointsDoes the page have any formatting? Does it have the colors and such?