Trouble with grid.css

Question

I am currently on the video "Working with Grids." I downloaded the zip file from the page and opened the normalize.css and grid.css files on Sublime Text 2. Now when I tried to add the <div class="container"> command to access .container from grid.css, the command does not show up when I refresh my web page.

Any help would be awesome.

Answer 1 · 2013-12-18T02:30:35Z

December 18, 2013 2:30am

Click the markdown cheatsheet below the textbox for the rules. You can either tab in 4 times for 1 line, or use three tick marks ``` to start and end code. Use HTML and CSS next to the first set of 3 tickmarks to syntax highlight the code.

Answer 2 · 2013-12-18T01:56:34Z

December 18, 2013 1:56am

Have you made sure to include the stylesheets in your HTML file? You'll need this in the header:

<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="grid.css">

Answer 3 · 2013-12-18T02:14:42Z

December 18, 2013 2:14am

Thanks for the reply.

And yes, both of the stylesheets are included in my file.

Answer 4 · 2013-12-18T02:18:03Z

December 18, 2013 2:18am

Can you past in your html? and your css for .container

Answer 5 · 2013-12-18T02:20:38Z

December 18, 2013 2:20am

'''html <!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="screen"> <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen"> </head> <body> <div class="container"> '''

Answer 6 · 2013-12-18T02:21:12Z

December 18, 2013 2:21am

I'm still trying to figure out how to paste my HTML on here haha...

Answer 7 · 2013-12-18T02:23:10Z

December 18, 2013 2:23am

Answer 8 · 2013-12-18T02:23:53Z

December 18, 2013 2:23am

How did you get that nice gray box with the code in it?

Answer 9 · 2013-12-18T02:36:14Z

December 18, 2013 2:36am

<!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="screen">
  <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
</head>
<body>
  <div class="container">

Answer 10 · 2013-12-18T02:37:44Z

December 18, 2013 2:37am

.grid_1 { width: 65px; }
.grid_2 { width: 150px; }
.grid_3 { width: 235px; }
.grid_4 { width: 320px; }
.grid_5 { width: 405px; }
.grid_6 { width: 490px; }
.grid_7 { width: 575px; }
.grid_8 { width: 660px; }
.grid_9 { width: 745px; }
.grid_10 { width: 830px; }
.grid_11 { width: 915px; }
.grid_12 { width: 1000px; }

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    margin: 0 20px 10px 0;
    float: left;
    display: block;
}

.alpha{margin-left:0px;}
.omega{margin-right:0px;}

.container{
    width: 1000px; 
    margin: auto;
}



.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}* html .clearfix,*:first-child+html .clearfix{zoom:1}

Answer 11 · 2013-12-18T02:46:49Z

December 18, 2013 2:46am

I'm not sure what the issue is. The code look almost correct. You need to close both the container div and your body meaning you need:

 </div> and </body>

What is it not doing correctly? What do you want it to do?

Answer 12 · 2013-12-18T02:58:51Z

December 18, 2013 2:58am

Well on the video it explains that once I refresh my browser, the page margins should center align, giving it a more balanced look. But when I click refresh, nothing happens. I'll sift through google some more and see what I can find. It might just be my Google Chrome Browser.

Answer 13 · 2013-12-18T03:26:55Z

December 18, 2013 3:26am

<!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="screen">
  <link rel="stylesheet" href="css/grid.css" type="text/css" media="screen">
</head>
<body>
  <div class="container">
    <img src="http://i.imgur.com/D33By0w.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 unexpected flavors that melt together to create ironically delicious desserts.
      </h1>
      <p><a href="#" class="btn">Browse Our Cupcakes</a></p>
    </div>
    <img src="http://i.imgur.com/xuRWB8F.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>. It's a strange combo of flavors that will kick your taste buds into fiesta mode!</p>
      <img src="http://i.imgur.com/Xu75IoS.jpg" alt="Avocado Chocolate Cupcake">
    </div>

    <div id="new-cupcakes">
      <h2>Fresh Out the Oven</h2>
      <p>Our newest cupcakes are <a href="#">Bakin Me Crazy</a> and <a href="#">Jalapeno So Spicy</a>. </p>
      <img src="http://i.imgur.com/oxwqBw4.jpg" alt="Bacon Me Crazy">
      <img src="http://i.imgur.com/TEFw73O.jpg" alt="Jalapeno So Spicy">
    </div>

    <h2>Inside the Kitchen</h2>
    <p>Smells like Bakin' started out in the garage of the husband wife duo Allison &amp; Joseph. Allison is the baker, and Joseph found a way for them to make a business out of her tasty treats. Flash forward to today and they have a succesful 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-555-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="http://i.imgur.com/cOHY7m0.gif" alt="Facebook"></a>
    <a href="https://twitter.com/#!/smellslikebakin"><img src="http://i.imgur.com/BAz7gBM.gif" alt="Twitter"></a>

    <div id="copyright">
      <p>&copy; 2012 Smells Like Bakin' Cupcake Company. All Rights Reserved.</p>
    </div>
  </div>







</body>
</html>

I appreciate the help!

Answer 14 · 2013-12-18T03:30:29Z

December 18, 2013 3:30am

Works fine for me. Make sure you have your browser stretched open past 1000px. On my 12" laptop, that takes almost the entire screen to see it centered in the middle.

Otherwise, not sure what's happening.

Answer 15 · 2013-12-18T03:36:19Z

December 18, 2013 3:36am

Got it, thanks you da best.

Welcome to the Treehouse Community

Looking to learn something new?

Pravin Boteju

Pravin Boteju

Trouble with grid.css

15 Answers

Brandon Barrette

Brandon Barrette

Brandon Barrette

Brandon Barrette

Pravin Boteju

Pravin Boteju

Brandon Barrette

Brandon Barrette

Pravin Boteju

Pravin Boteju

Pravin Boteju

Pravin Boteju

Pravin Boteju

Pravin Boteju

Pravin Boteju

Pravin Boteju

Pravin Boteju

Pravin Boteju

Pravin Boteju

Pravin Boteju

Brandon Barrette

Brandon Barrette

Pravin Boteju

Pravin Boteju

Brandon Barrette

Brandon Barrette

Pravin Boteju

Pravin Boteju

Brandon Barrette

Brandon Barrette

Pravin Boteju

Pravin Boteju

Brandon Barrette

Brandon Barrette

Pravin Boteju

Pravin Boteju