Что делать если тег HTML создаёт ненужный отступ?

Question

Xveeder @Xveeder

Что делать если тег HTML создаёт ненужный отступ?

Вопрос конечно жутко нубский, но данный тег создаёт некий ненужный отступ перед тегом. Всеми способами пытался его убрать. Не выходит.

Получается, что высота body = 757px, а высота html = 777

Серая область это и есть отступ.

Здесь код страницы

!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>More Air. Digital Agency</title>
    <link rel="stylesheet" href="./css/style.css">
    <link rel="stylesheet" href="./css/font-awesome.min.css">
</head>
<body>
    <div class="header">
        
        <div class="menu">
            <div class="menu_bottom clearfix">
               <div class="menu_container">
                    <div class="menu_logo clearfix">
                        <img src="./img/logo.svg" alt="Логотип">
                    </div>
                    <div class="menu_item clearfix center-center">
                        <ul>
                            <li><a href="#">Продукт</a></li>
                            <li><a href="#">Разработчики</a></li>
                            <li><a href="#">Цена</a></li>
                        </ul>
                    </div>
                    <div class="menu_item_info clearfix">
                        <ul>
                            <li><a href="#">О компании</a></li>
                            <li><a href="#">Помощь</a></li>
                        </ul>
                    </div>
                </div>    
            </div>
        </div>
        <div class="hero">
            <div class="title">
                <h1>Конъюнктурная веб-разработка</h1>
                <ul>
                    <li>
                        <a href="#">Звонок</a>
                        
                    </li>
                    <li>    
                        <a href="#">Смс</a>
                        
                    </li>
                    <li>
                        <a href="#">Чат</a>
                    
                    </li>
                </ul>
            </div>
            <div class="hero_form">
                <form class="form_container" action="">
                    <div class="its_form clearfix">  
                        <span class="cta_form_input">
                            <input type="text" placeholder="Ваш email">
                        </span>
                        <span class="cta_form_button">
                            <button type="submit" class="button_style">Начать работу</button>
                        </span>    
                    </div>     
                </form>
                <p>Ищите персональное предложение? <a href="#">Обратитесь в поддержку!</a></p>
            </div>
            <div class="hero_img">
                <img src="https://cdn-gc.messagebird.com/assets/images/2017/homepage-sm.png" alt="">
            </div>
        </div>
    </div>
</body>
</html>

html {
    margin: 0;
}

body {
    
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    
}

li {
    padding-right: 10px; 
    display: inline-block;
    
    list-style: none;
    text-decoration: none;
    font-weight: 100;
} 

ul {
    width: auto;
}

a {
    list-style: none;
    text-decoration: none;
    color: blue;
    font-weight: 100;
}

a:hover {
    color: #4c5669;
}

.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.header {
    
    width: 100%;
    height: auto;
    margin: 0;
    background: #f6fafd;
}

.menu {
    
    width: 100%;
    height: auto;
    margin: auto; 
    margin-top: 20px;
    box-shadow: 3px 6px 10px rgba(36,129,215,.05),0 4px 6px rgba(36,129,215,.04)!important;
    background-color: #fff;
}

.menu_container{
    width: 100%;
    height: auto;
    max-width: 950px;
    min-width: 320px;
    
    margin: auto; 
    margin-top: 20px;
}

.menu_bottom {
    
    width: 100%;
    height: auto;
    max-width: 1170px;
    min-width: 320px;
    
    margin: auto;  
}

.menu_topButton {
    
     text-align: right;  
}

.topButton_li {
    color: blue;
}

.topButton_li:hover {
    color: black;
}

.menu_logo {    
    float: left;

}

.menu_logo > img {    
    
    width: 65%;
    margin-top: 9px;
    vertical-align: top;
    display: inline-block;
    
}

.menu_item {
    width: auto;
    display: inline-block;
    margin: auto;
    text-align: center;
}

.menu_item_info {
    width: auto;
    
    float: right;
    display: inline-block;
}

/* SECTION HERO START */

.hero {
    width: 100%;
    height: auto;
    max-width: 1170px;
    min-width: 320px;
    
    margin: auto;  
    
}

.hero > .title > h1 {  
    text-align: center;
    margin: auto;
    margin-top: 10%;
    font-size: 38px;
    font-weight: 300;
   
}

.hero > .title > ul { 
    width: 30%;
    text-align: center;
    padding: 0;
    padding-bottom: 4%;
    margin: auto;
    margin-top: 1%;
   
}

.hero_form {
    width: 100%;
    max-width: 1000px;
    margin: auto;
    padding: 25px;
    
}

.hero_form p {
    text-align: center;
    margin: 10px; 
    padding-bottom: 3%;
    font-size: 12px;
}

.form_container {
    width: 100%;
    margin: auto;
        
}

.form_container::after {
    content: "";
    display: table;
    clear: both;
        
}

.cta_form_input > input {

    margin: auto;
    min-width: 250px;
    padding-left: 10px;
    height: 36px;
    text-align: left;
    color: cornflowerblue;
    outline: none;
    border: none;
    float: left
        

}

.cta_form_button > button{
    
    color: white;
    background-color: #2d9bf3;
    margin-left: -1px;
    padding-right: 20px;
    padding-left: 20px;
    min-width: 100px;
    height: 38px;
    text-align: center;
    outline: none;
    border: none;
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px;
    float: left
}

.button_style:hover {
    background-color: #1f72bf;
}

.button_style:active {
    background-color: #2a94e8;
}

.hero_img {
    text-align: center;
}

.its_form {
    width: 390px;
    margin: auto;
    box-shadow: 3px 6px 10px rgba(36,129,215,.05),0 4px 6px rgba(36,129,215,.04)!important;
}
/* SECTION HERO END */