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
Nolan Lewis
Courses Plus Student 341 PointsProblem spacing on smells like bakin site. Everything seems to be fine?
HI guys im relatively new on treehouse and have been following along with the tutorials on my own with sublime text. My mock site seemed to be coming together perfectly but then when i went to space my bottom two topics "inside the kitchen" and "get bakin with us" the two don't want to evenly space out across the page. instead they seem to stack on top of each other. any ideas? heres my code so far. Thanks in advance, Nolan. <!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"> <link href='http://fonts.googleapis.com/css?family=Nunito' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/style.css" type="text/css" media="screen"> </head>
<body> <div class="container clearfix"> <div class="grid_4"> <img src="logo.gif" Alt="Smells like Bakin"> </div>
<div class="grid_8 omega">
<ul class="nav">
<li><a href="#">About</a></li>
<li><a href="#">Cupcakes & Prices</a></li>
<li><a href="#">Locations</a></li>
<li classs="last"><a href="#">Contact Us</a></li>
</ul>
</div>
<div id="intro" class="grid_9">
<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>
<div class="grid_3 omega">
<img src="you-bake-me-blush.gif" alt="You Bake Me Blush">
</div>
<div id="featured-cupcake" class="grid_7">
<h2>Cupcake of the Week</h2>
<p>This week's featured cupcake is the <a href="#">Avocado Chocolate cupcake</a>. Its strange combo of flavors will kick your taste buds into fiesta mode!</p>
<img src="featured-cupcake.jpg" alt="Avocado Featured Cupcake"/>
</div>
<div id="new-Cupcakes" class="grid_5 omega">
<h2>Fresh out the oven</h2>
<p>Our newest cupcakes are <a href="#">Bacon Me Crazy</a> and <a href="#">Jalapeno so spicy</a>. </p>
<img src="new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
<img src="new-cupcake-jalapeno.jpg" alt="Jalapeno So Spicy"
</div>
<div class="grid_7">
<h2>Inside the Kitchen</h2>
<p>Smells like bakin started in the garage of the housband and wife duo Allison & Joseph. Allison is the bake, and joseph found a way to make a business out of her tasty treats. Flash forward to today and they have a successful sotre front, catering business and cupcake truck. </p>
<p><a href="#" class="btn-small">Read More</a></p>
</div>
<div class="grid_5 omega">
<h2>Get bakin with us</h2>
<div id="contact">
<p>Call us: <span>1-555-CUP-CAKE</span><br>
Email us: <a href="#">Bakin@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="facebook.gif" alt="Facebook"></a>
<a href="http;//www.Twitter.com/SmellsLikeBakin"><img src="twitter.gif" alt="Twitter"></a>
</div>
<div id="copyright" class="grid_12">
<p>© 2012 Smells Like Bakin' Cupcake Company. All Right Reserved. </p>
</div>
</div> </body> </html>
7 Answers
Jacob Miller
12,466 PointsWell, I see some places where you're missing divs, or missing #'s when you're trying to target id's in CSS. I think what would help you the most is to download the project files (the link is located to the right of the tutorial videos), open those up in Sublime Text, and compare them with your HTML and CSS. Go through line by line and make sure you have the correct div's in place with the correct class names, etc.
Jacob Miller
12,466 PointsCan you post your CSS?
Nolan Lewis
Courses Plus Student 341 Pointsbody { font-family: 'Nunito', sans-serif; color: #FAF3BC; background: #420600 url('img/bg-texture.jpg') repeat; }
a { color : #4FB69F; text-decoration: none; }
h1 { font-size:1.750em; letter-spacing: -1.5px; } h2{ font-size:1.500em; color: #B4C34F; }
.btn { color: #FAF3BC; background: #4FB69F url('img/texture.png') no-repeat right top; padding: 15px 30px; margin: 40px 0px; border-radius: 25px; text-transform: uppercase; }
.btn:hover { background-color: #4CC4A7; } ul.nav { margin: 120px 0 0 0; list-style: none; float: right; }
ul.nav li{ float: left; margin-right: 40px; } ul.nav li a { color: #FAF3BC; }
intro {
margin: 50px 0 75px 0;
}
new-cupcakes im {
border: 8px solid #FAF3BC;
margin : 0 0 20px 0;
}
featured-cupcake img {
border: 8px solid #FAF3BC;
}
copyright {
border-top: 8px solid #2A0400;
padding: 10px 0px;
margin: 15px 0px;
text-align: center;
}
}
Nolan Lewis
Courses Plus Student 341 PointsI'm not entirely sure why the css posted like that, if it's a hassle reading it ill try and adjust it. sorry about that, first time using the forum here.
Julian Sprick
1,279 PointsThe "#" is missing before intro, new-cupcakes, featured-cupcakes and copyright. Moreover, the "g" in "new-cupcakes img" is missing.
Nolan Lewis
Courses Plus Student 341 PointsOk thanks. Ive already done that once already but maybe I'll try it again...any tips on what I should do to fix the div issue perhaps give me an example if you could.
Nolan Lewis
Courses Plus Student 341 PointsThanks for all the help guys! I've been rather busy lately and haven't had time to try it out yet but Im sure I will solve all the issues now.