Text and Layout issues

Question

I have added the two .css files, and am following along with the tutorial. My text on the right side is not formatted correctly and the text under the <div> intro is formatted as a link. What is wrong with the code, it seems to match perfectly to the code displayed in the video.

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Conten-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 clearfix">
        <div class="grid_4">
            <img src="img/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 &amp; Prices</a></li>
            <li><a href ="#">Locations</a></li>
            <li class="last"><a href ="#">Contact Us</>></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 delicous desserts.</h1>
        <p><a href ="#" class="btn">Browse Our Cupcakes</a></p>
    </div>
    <div class="grid_3">
        <img src="img/you-bake-me-blush.gif" alt="You Make 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 combination of flavors will kick your taste buds into fiesta mode!</p>
        <img src="img/featured-cupcake.jpg">
    </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="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 wife duo Allsion &amp; Joseph. Allsion 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 successfuly 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@smellslikebacon.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="http://www.twitter.com/SmellsLikeBakin"><img src="img/twitter.gif" alt ="Twitter"></a>

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

</div> </body> </html>

Answer 1 · 2013-08-14T05:52:58Z

August 14, 2013 5:52am

To avoid cluttering the forum with typo issues, I suggest you check your HTML with http://validator.w3.org/ and fix all typos to then see if there are any remaining issues.

Good luck! :)

Answer 2 · 2013-08-14T02:54:41Z

August 14, 2013 2:54am

Try looking at this line for your issue:

<li class="last"><a href ="#">Contact Us</>></li>

Welcome to the Treehouse Community

Looking to learn something new?

Justin Thorson

Justin Thorson

Text and Layout issues

Tomasz Foster

Tomasz Foster

2 Answers

Thomas MacFarlane

Thomas MacFarlane

Matt Caden

Matt Caden