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
Kevin Faro
272 PointsGrid CSS
Hello I am a newbie to web design. I was following the tutorial on working with grids. I make sure I followed the instructor but I am presently stuck at the class container part. I wrote the same css code as the instructor but when I refresh my webpage there are no changes to the webpage. The content of the page suppose to centralized with equal margins at each side of the page. Below is what I presently have
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Smells Like Bakin' Cupcake Company</title>
<link rel="stylesheet" href="css/normalize.css" type="text/css" media="screens">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="screens">
</head>
<body>
<div class="container">
<img src="img/logo.gif" alt="Smells Like Bakin">
<ul class="nav">
<li><a href="#">About</a></li>
<li><a href= "#">Cupcakes & Prices</a></li>
<li><a href="#">Locations</a></li>
<li class="last"><a href="#">Contact Us</a></li>
</ul>
<div id="intro">
<h1>Opposites really do attract, especially in our kitchen! We combine flavors that melt together to create ironically delicious desserts.</h1>
<p><a href="#" class="btn">Browse Our Cupcakes</a></p>
</div>
<img src="img/you-bake-me-blush.gif" alt="You Bake Me Blush">
<div id="featured-cupcake">
<h2>Cupcake of the Week</h2>
<p>This week's featured cupcake is the <a href="#">Avocado Chocolate cupcake</a>. Its strange combo of flavor will kick your taste bud into fiesta mood!</p>
<img src="img/featured-cupcake.jpg" alt="Avocado Chocolate Cupcake">
</div>
<div id="new-cupcakes">
<h2>Fresh Out the Oven</h2>
<p>Our newst cupcakes are <a href="#"> Bacon Me Crazy</a> and <a href="#"> Jalapeno So Spicy</a>.</p>
<img src="img/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
<img src="img/new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy">
</div>
<h2>Inside the kitchen</h2>
<p>Smells Like Bakin' started out in the garage of the husband ife duo Allison & Joseph. Allison is the bake, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and have a successful store front, catering business and cupcake truck</p>
<p><a href ="#" class="btn-small">Read More</a></p>
<h2>Get Bakin with Us</h2>
<div id="contact">
<p>Call us: <span>1-55-CUP-CAKE</span><br>
Email us: <a href="#">bakeon@smellslikebakin.com</a></p>
</div>
<p>We announce all of our new flavors first through Facebook & Twitter, and even take requests!</p>
<a href="http://www.facebook.com/SmellsLikeBakin"><img src="img/facebook.gif" alt="facebook"></a>
<a href="https://twitter.com/#!/smellslikebakin"><img src="img/twitter.gif" alt="twitter"></a>
<div id="copyright">
<p>© 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
</div>
</div>
</body>
</html>
I will appreciate any help. thank you in advance.
6 Answers
Kevin Korte
28,149 PointsWhat does your CSS look like? I didn't see a container class in your HTML you posted, but what is suppose to happen is the container wraps around all of your HTML content. When we give the container class a width, and set it's margin in the CSS to margin: 0 auto; the browser will take the width of the screen, and the width of the container, and in place of the word auto, will calculate that margin number correctly, thus centering the content on the screen.
Kevin Faro
272 PointsKevin Korte please how can I copy and paste the whole code in this place. I seem not to be seeing part of it. Thank you.
Kevin Korte
28,149 PointsCheck this https://teamtreehouse.com/forum/how-to-type-code-in-the-forum
Only took me about 8 months to find out how myself.
Kevin Faro
272 PointsThank you Kevin. I believe you can now see the whole code now in my first question. So can you help me solve this problem?
Kevin Korte
28,149 PointsIt appears to be working. All I did was copy and paste your HTML, and added the CSS for the container, and the content is centered.
Is that what you see?
Kevin Faro
272 PointsNo Kevin, When I open it on my browser everything is not centered. Its more like towards the left. What should I do?
Kevin Korte
28,149 PointsVerify that your display screen is wider than 1000px. If it's not, it will just left align.
I just changed that codepen to only a 500px wide container. Now try taking a look at it, assuming your screen is wider than 500px.
Kevin Faro
272 PointsYes it is. Its 1280 by 800
Kevin Faro
272 PointsHello Kevin,
Can you please help check my code again because I just downloaded the complete project file from the training page and when I open the index file on my web browser, everything was centralized meaning that it is not my display screen problem.
Kevin Faro
272 PointsKevin Faro
272 Pointsdiv class="container"
This is the conatiner properties .container{ width: 1000px; margin: auto; }