Появляется лишний отступ

Question

Как убрать отступ показанный на скриншоте?Помогите пожалуйста

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="UTF-8">
        <meta name="keywords" content="test,site,website">
        <meta name="description" content="Это тестовый сайт">
        <link rel="stylesheet" href="css/new.css">
        <link rel="shortcut icon" href="img/global-icon.jpg" type="image/x-icon">
        <title>Тестовый сайт</title>
    </head>
    <body>
        <div id="page-wrap">
            <header>
                <a href="new.html" id="logo" target="target">Test-site</a>
                <span class="contact"><a href="about.html" target="balnk">О нас</a>
                <input type="text" class="field" placeholder="Поиск">
                <span class="contact">
                        <span class="right">
                            <a href="about.html" title="зарегистрироваться" >Регитсрация</a>
                            <a href="about.html" title="войти в аккаунт">Вход</a>
                        </span>
                    </span>
                </span>
            </header>

            <div class="clear"> </div>
            <div id="menu">Разделы
                <hr>
            </div>
            <div id="menuHrefs">
                <a href="#" class="newHrefs">Кто мы?</a>
                <a href="#" class="newHrefs">Обратная связь</a>
                <a href="#" class="newHrefs">Наши специалисты</a>
            </div>
        </div>
        <div id="wrapper">
            <div id="articles">
                <article>
                    статья
                </article>
            </div>
        </div>
        <footer>
            <span class="left">Все права защищены &copy; 2020</span>
            <span id="soc-seti"><a href="#">Социальные сети</a> <img src="img/vkontakte_PNG23.png"
            alt="группа ВКонтакте" title="группа ВКонтакте"></span>
        </footer>
    </body>
</html>

* {
    margin: 0;
    padding: 0;
}
html {
    height: 100%;
}
body {
    width: 100;
    height: 100%;
    color: #333;
    background: whitesmoke;
    font-size: 1em;
    line-height: 135%;
}
/*ссылки*/
a {
    color: #da4646;
    text-decoration: none;
    transition: all.3s ease;
}
a:hover {
    color: #052b95;
    text-decoration: none;
    transition: all.3s ease;
}
a:active{color: #8ce4a6}
/*selection block*/
::selection {
    background: #da4646;
    color: #fff;
}
::-moz-selection {background-color: #da4646; color: #fff;}
/*стили изображений*/
img {
    max-width: 100%;
    height: auto;
    width: auto;
}
header, footer{
    width: 100%;
    background-color: #fff;
    float: left;
}
header {
    border-bottom: 2px solid silver;
    margin-top: 10px;
    height: 50px;
}
#logo {
    font-size: 1.5em;
    padding: 1%;
    color: silver;
}
.contact {
    font-size: 1.3em;
    margin-left: 10px;
}
.field {
    border-radius: 5px;
    border: 2px solid silver;
    padding: 10px;
    margin-left: 20px;
    outline: none;
    margin-top: 7px;
}
.field:focus {
    border: 2px solid #da4646;
}
.right {
    word-spacing: 8px;
    float: right;
    margin-top: 12px;
    margin-right: 10px;
}
.left {
    float: left;
    color: black;
}
#soc-seti{
    word-spacing: 3px;
    float: right;
    margin-top: 12px;
    margin-right: 10px;
}
footer {
    padding: 1%;
    border-top: 2px solid silver;
    margin-top: 10px;
    padding-bottom: 2%;
}
footer img {
    float: left;
    margin-left: 10px;
    width: 13%;
}

}
footer, #page-wrap:after {
    height: 10px;
}
header, footer {
    width: 98%;
    color: #fff;
    float: left;
}
#page-wrap {
    min-height: 100%;
    margin-bottom: -10px;
}
.clear {clear: both;}
#menu {
    margin-top: 10px;
    text-align: center;
    color: #666;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 30px;
    font-weight: normal;
}
#menu hr {
    width: 500px;
    min-width: 500px;
    margin-top: 5px;
    margin-bottom: 10px;
}
hr {
    display: block;
    border: 0;
    height: 1px;
    border-top: 1px solid silver;
    margin-left: 350px;
}
#menuHrefs  {
    text-align: center;
    padding: 5px ;
    margin-left: 5px;
}
.newHrefs {
    border-radius: 3px;
    color: #626262;
    margin-left: 20px;
    margin-right: 20px;
}
.newHrefs:hover {
    background-color: #c5bcbc85;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    color: #626262;
}
#wrapper {
    float: left;
    width: 100%;
}
#wrapper #articles {
    float: left;
    width: 80%;
    margin-left: 10%;
}
#wrapper #articles article {
    float: left;
    width: 33.33;
    border: 1px solid silver;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: #f5faafaa;
}

Answer 1

Уберите height: 100% у html и body. У #page-wrap уберите min-height: 100%;.

БЛОГ НА HUSL

Появляется лишний отступ

Ответы (1 шт):