Some Problems with creating a fluid webpage...converting text and widths of web page...

Question

I'm currently working through the project how to make a website more responsive on treehouse and I've hit a problem. I'm in the early stages of trying to make the page more fluid and currently I've just changed all the text font-sizes on the webpage from px to em as well as changing the grid css page grid sections from px to percentages. My problems right now are this. My website is no longer centered like it was before, the text is being pushed right to the left of the page. Furthermore, my nav section and h1 header have been changed from px to em but they will not resize with the page. I have no idea how to correct these so below I will post my index.html code, the grid.css code and style.css code. If you have any spare time please take a look and let me know what I'm doing wrong thanks in advanced.

I'm sure my mistakes are obvious but I really can't see them so if you can please let me know:

Index.html code:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset = utf-8">
    <title> Smells Like Baking 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="images/logo.gif" alt="baking company">
        </div>
        <div"class="grid_8 omega">
            <ul id="nav-bar" class="nav">
                <li><a href="#">About</a></li>
                <li><a href="#">Cupcakes and Prices</a></li>
                <li><a href="#">Locations</a></li>
                <li class="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 all flavours to bring you the best</h1>
            <p><a href="#" class="btn">Browse Our Cupcakes</a></p>
        </div>
        <div class="grid_3 omega">
            <img src="images/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="#">Avacado Chocolate cupcake</a> its strange combo flavours will kick you into shape</p>
            <img src="images/featured-cupcake.jpg" alt="Avacado Chocolate 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> so so so <a href="#">spicy</a></p>
            <img src="images/new-cupcake-bacon.jpg" alt="Bacon Me Crazy">
            <img src="images/new-cupcake-jalapeno.jpg" alt="sooooooo spicy">
        </div>

        <div id="inside-kitchen" class="grid_7">
            <h2>Inside the Kitchen</h2>
            <p>"They both have similar feedback with the car, and there are aspects of this year's rules that make the cars across the pitlane a far from easy aspect for the driver. There is a lot more torque from the engine, a lot less aerodynamic grip, and the tyres are deliberately less aggressive than last year.</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>0123456799</span><br>
                Email us:<a href="#">baking.com</a></p>
            </div>


            <p>We take booking requests through our Facebook and Twitter</p>
            <a href="http://www.facebook.com"><img src="images/facebook.gif" alt="facebook"></a>
            <a href="http://www.twitter.com"><img src="images/twitter.gif" alt="twitter"></a>
        </div>

        <div id="copyright" class="grid_12">
            <p>&copy; smells like bakin comapny all rights reserved</p>
        </div>

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

Grid.css code:

/*
 Width: 1000px
 # Columns : 12 
 Column width: 65px
 Gutter : 20px 

 */
.grid_1 { width: 6.5%; } /*65px*/
.grid_2 { width: 15%; } /*150px*/
.grid_3 { width: 23.5%; } /*235px*/
.grid_4 { width: 32%; } /*320px*/
.grid_5 { width: 40.5%; } /*405px*/
.grid_6 { width: 49%; } /*490px*/
.grid_7 { width: 57.5%; } /*575px*/
.grid_8 { width: 66%; } /*660px*/
.grid_9 { width: 74.5%; } /*745px*/
.grid_10 { width: 83%; } /*830px*/
.grid_11 { width: 91.5%; } /*915px*/
.grid_12 { width: 100%; }

.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 2% 1% 0;
    float: left;
    display: block;
}

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

.container{
    width: 90%;
    max-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}

Style.css code:

body {
    font-family: 'Nunito', sans-serif;
    color: #FAF3BC;
    background: #420600 url('img/bg-texture.jpg') repeat;
}

a {
    color: #4FB68F;
    text-decoration: none;
}


/*********** FONT SIZE SECTION*************/
/******************************************/
h1 {
    font-size: 1.750em;
    letter-spacing: -1.5px;
}

h2 {
    font-size: 1.500em;
    color: #b4c34f;
}

#nav-bar li a {
    font-size: 1.0625em;  /*17px*/
}

.btn {
    font-size: 1.1875em; /*19px*/
}

#featured-cupcake p {
    font-size: 1em; /*16px*/
}

#new-cupcakes p {
    font-size: 1em; /*16px*/
}

#inside-kitchen p {
    font-size: 1em; /*16px*/    
}

#contact p {
    font-size: 1em; /*16px*/
}

#copyright p {
    font-size: 1em;
}

.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 img {
    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;

Welcome to the Treehouse Community

Looking to learn something new?

troy beckett

troy beckett

Some Problems with creating a fluid webpage...converting text and widths of web page...