Некорректное отображение сайта,в чем дело?

Question

Артур Мартынов @ArturMartynov

HTML
CSS

Некорректное отображение сайта,в чем дело?

<?php

?>
<!DOCTYPE html>
<html>
<head>
   <title>Новости обо всем</title>
     <?php 
    
 require_once"blocks/head.php";
 ?>
</head>
<body>
    <style>
        body {
            background: #52b801 url(img/backgound_2.jpg); /* Цвет фона и путь к файлу */
            background-size: 100%;
        }
    </style>
<?php require_once"blocks/header.php"?>
  <div id="wrapper">
        <div id="leftCol">
        <div id="bigArticle">
            <img src="/img/articles/article_1.jpg" alt="Статья 1" title="Статья 1">
            <h2>Статья 1</h2>
            <p>Один из самых авторитетных тренеров в России продолжает описывать свой путь в американском футболе. Сегодня — о поездках в Штаты, детском футболе, гостеприимстве американцев и записке для родителей.
            </p>
           <a href="/article.php"><div class="more">Далее</div></a> 
        </div>
            <div class="clear"><br>
            </div>
            <div class="article">
                <img src="/img/articles/article_2.jpg" alt="Статья 1" title="Статья 1">
            <h2>Статья 1</h2>
            <p>Ну и немного воспоминаний о прошлом сезоне...В июле 2015 годы мы проводили выставочный матч с командой Рэйдерс 52 на фестивале Alfa Future People - теперь же фото с нашего матча украшают главную страницу предстоящего фестиваля.В этом сезоне мы тоже надеемся получить приглашение на мероприятие.
            </p>
                <a href="/article.php"><div class="more">Далее</div></a>
            </div>
            <div class="article">
                <img src="/img/articles/article_3.jpg" alt="Статья 1" title="Статья 1">
            <h2>Статья 1</h2>
            <p>«Грустно, когда понимаешь, что в России такого никогда не будет». Как прошел тренировочный лагерь в Екатеринбурге.Участники тренировочного лагеря в Екатеринбурге – о мероприятии, на котором побывали экс-звезда НФЛ Майкл Хэйнс и известный тренер Билли Элмор.
            </p>
                <a href="/article.php"><div class="more">Далее</div></a>
            </div>
        </div>
    </div>
<?php require_once"blocks/footer.php"?>
</body>
</html>

@charset "utf-8";
* {
    margin: 0;
    padding: 0;
    outline: none;
    
}
html{height: 100%}
body{
    width: 100%;
    height: 100%;
    background: #939393 ;
    font-family: "Segoe UI",Arial,sans-serif;
    font-size: 1em;
    line-height: 135%;
    
}
img{
    max-width: 100%;
    height: auto;
        
}
a{color: #616161;
  text-decoration: none;
  -webkit-transition: all.6s ease;
  -moz-transition: all.6s ease;
  -o-transition: all.6s ease;
  -ms-transition: all.6s ease;
  transition: all.6s ease;
}
a:hover{
    color: #fb6a6a;
}
a,a:hover{
    -webkit-transition: all.6s ease;
  -moz-transition: all.6s ease;
  -o-transition: all.6s ease;
  -ms-transition: all.6s ease;
  transition: all.6s ease;
}
.clear{
    clear: both;
}
/*стили для шапки*/
header{
    width: 98%;
    float: left;
    padding: 1%;
    background-color: #ececec;
    border-bottom: 2px solid silver;
    margin-bottom: 20px;
}
header #logo{
    width: 40%;
    float: left;
    
}
header #logo a {
        color: #000;
    font-size: 2em;
    font-family: 'Times New Roman',sans-serif;
}
header #logo span{
    color: #2b8f13;
}
header #menuHead{
    width: 24%;
    float: left;
}
header #menuHead div{
    float: left;
    padding: 5px;
    background-color: #4abf53;
    border-radius: 5px;
    color: #000;
}
header #menuHead div:hover {
    background-color: #a1d681;
    color: #4c4646;
}
header #regAuth{
    
    width: 30%;
   float: right;
    text-align: right;
  font-size: 1.3em;
}
header #regAuth a{
    color: #000;
}
/*Стили для всего документа*/
#wrapper{
    width: 80%;
    float: left;
    margin-left: 10%;
}
/*Стили для правой колонки*/
#wrapper #rightCol {
    width: 20%;
    float: left;
}
/*Стили для левой колонки*/
#wrapper #leftCol{
    margin-right: 10%;
    width: 70%;
    float: left;
}
#wrapper #leftCol #bigArticle {
    width: 80%;
    margin-left: 10%;
    background-color: #ececec;
    padding: 1%;
    border-radius: 10px;
    
}
#wrapper #leftCol #bigArticle img,#wrapper #leftCol .article img {
    width: 100%;
    float: left;
    margin-bottom:10px;
    
}
#wrapper #leftCol #bigArticle h2,#wrapper #leftCol .article h2 {
    font-weight: normal;
    font-size: 1.3em;
    color: #000;
    font-family: 'Comic Sans MS',sans-serif;
}
#wrapper #leftCol #bigArticle p,#wrapper #leftCol .article p{
    width: 90%;
    margin-left: 5%;
    
}
#wrapper #leftCol #bigArticle div.more,#wrapper #leftCol .article div.more{
    padding: 5px;
    border-radius: 5px;
    background-color: #4abf53;
    color: #000;
    width: 20%;
    text-align: center;      
}
#wrapper #leftCol #bigArticle div.more:hover,#wrapper #leftCol .article div.more:hover{
    background-color: silver;
    
}
#wrapper #leftCol .article {
    width: 40%;
    margin-left: 5%;
    background-color: #ececec;
    padding: 1%;
    float: left;
    border-radius: 5px;
}
#wrapper #rightCol .banner{
    width: 100%;
    float: left;
    margin-bottom: 20px;
}
/*Стили для Footer*/
footer{
    width: 98%;
    float: left;
    padding: 1%;
    background-color: #ececec;
    border-top: 2px solid silver;
    margin-top: 10px;
}
footer #social {
    float: left;
    width: 50%;
        
}
footer #social img{
    width:30px;
    height: 30px;
    float: left;
    margin-right: 5px;
     
}
footer #rights {
    float: right;
    width: 50%;
    text-align: right;
    font-size: 1.1em;
        
}