Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Kevin Faro
Kevin Faro
272 Points

Grid 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 &amp; 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 &amp; 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 &amp; 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>&copy; 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
Kevin Korte
28,135 Points

What 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
Kevin Faro
272 Points

div class="container"

This is the conatiner properties .container{ width: 1000px; margin: auto; }

Kevin Faro
Kevin Faro
272 Points

Kevin 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
Kevin Korte
28,135 Points

Check 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
Kevin Faro
272 Points

Thank 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
Kevin Korte
28,135 Points

It 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?

http://codepen.io/kevink/pen/rAwJa

Kevin Faro
Kevin Faro
272 Points

No Kevin, When I open it on my browser everything is not centered. Its more like towards the left. What should I do?

Kevin Korte
Kevin Korte
28,135 Points

Verify 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
Kevin Faro
272 Points

Yes it is. Its 1280 by 800

Kevin Faro
Kevin Faro
272 Points

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