Плавающие не работают, второе фоновое изображение не регистрируется в качестве фона, центрировать объекты?

/*The Main Background*/
body {
     background-image: url(../img/background.png);
    background-repeat: repeat-x;
} 

#HeaderImage{
    background-image: url(../img/HeaderImage.png);
    background-repeat: no-repeat;
     z-index: 1;
     background-position: left; 


}

.container {
    width: 960px;
    margin: 0 auto;
    font-family: 'Montserrat', sans-serif;
    font-size: 100%;
    line-height: 1.5;
    text-align: center;
}

/* Nav Element */

/*The Search Bar */form div{
/*Margin Header */ 48px;
float:left;
}


.site-navigation {
    height: 155px;
}

.site-navigation img {
    margin-top: 16px;
    float:left;
}

.site-navigation ul {
    width: 490px;
    margin: 0 auto;
}

.site-navigation li {
    margin: 35px 33px;
    float: left;
}

.site-navigation a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.site-navigation a:hover {
    padding-bottom: 2px;
    border-bottom: 1px solid white;
}

/* Header Element */

h2 {
    line-height: 0.8;
    font-size: 72px;
    font-weight: bold;
    color: #fff;
    width: 450px;
    border-bottom: 1px solid #d9d9d9;
    margin: auto;
    margin-top: 115px;
    padding-bottom: 42px;
}

.search{

}

.SearchGlass{
    float: left;
    position: top;
}

    <div class = "container"></div>
        <header class = "Team Sky">
            <nav class = "site-navigation">
                <img src = "img/TeamSkyLogo.png" alt = "Team Sky Logo">
                 <ul class = "clearfix">
                    <li><a href = "#">shop</a></li>
                    <li><a href = "#">checkout</a></li>
                    <li><a href = "#">video</a></li>
                </ul>

                <!-- SEARCH BAR AND MAGNIFYING GLASS!--> 


                  <div class = "SearchGlass" id = "SearchGlass">
                  <img src = "img/magnifyingglass.png" alt = "Magnifying Glass">
                  </div>


                     <form>
                     <div class = "search"> 
                        <!-- don't need a label here - use placeholder = "" (see forms we did in class - it's on moodle -->
                        <label for = "search">search</label> 
                        <input id = "search" type = "text" name = "search"/>

                    </div>
                </form>

                </nav>




                <div id = "HeaderImage">
        <img src = "img/HeaderImage.png" alt = "Dude on a bike"> 
    </div>

                    <!-- need to close your form element -->    

            <div class = "TeamSkylogo">
            <h2>Team Sky</h2>
            </div>

            <div class = "RoadToYellow">
            <P>the road to yellow</P>
            </div>
             <!--Shop Team Sky-->


        <main>

        <h1> TEAM NEWS </h1>
        <!-- each article/blog should be in it's own container -->
        <div class = "articleone">
        <img src = "img/ArticleImageOne.png" alt = "Water"> 
        <h1>Giro d'Italia</h1>
        <P>Landa will lead the team on the back of his assured and impressive win at the giro del Trentino, and he returns to the race having excelled last year, when he won</P>

        <!--readon !-->
        </div>

        <div class = "articletwo">
        <img src = "img/ArticleImageTwo.png" alt = "Bikes by River">
        <h1>Krudder Gets a Break</h1>
        <P>The powerful German who was a rock in the beginning of the season will now get a break from and is expected to return for the Malecour at the end of the season</P>
        <!--readon !-->
        </div>

        <div>
        <img src = "img/ArticleImageThree.png" alt = "Bike Dudes Biking">
        <h1>Kinnick's New Contract</h1>
        <P>Peter Kinnick contract is still not settled with the team manager Alistar McDowell saying that a new contract offer has been made</P>
        <!--readon !-->
        </div>

        <div class = "articlefour">
        <img src = "img/ArticleImageFour.png" alt = "Single Guy On Bike">
        <h1>Froom In Third</h1>
        <P>Chris Froom Finished Third in the opening prologue stage at the Criterium du Dauphine with a strong showing on the first day</P>
        <!--readon !-->
        </div>
    </main>

<footer>
    <img src = "img/sponsor1.png" alt = "Team Sky Sponsor">
   <img src = "img/sponsor2.png" alt = "Pinarello">
    <img src = "img/sponsor3.png" alt = "Shimano">
     <img src = "img/sponsor4.png" alt = "Rayha">
      <img src = "img/sponsor5.png" alt = "21ST Century Fox">
    </footer>