Насколько корректно указана ширина и высота элементов?
https://codepen.io/Krutov/pen/ZrdQeE
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100%;
min-height: 100vh;
background-color: aqua;
padding: 20px;
color: blue;
font-family: fantasy;
font-size: 50px;
}
.wraper{
border: 3px solid black;
background-color: bisque;
width: 100%;
max-width: 1300px;
padding: 10px;
margin: 0 auto;
}
.header{
background-color: red;
width: 100%;
border: 2px solid gold;
margin-bottom: 10px;
}
.left{
border: 2px solid green;
width: 200px;
max-width: 100%;
float: left;
margin-right: 180px;
}
.center{
border: 2px solid blue;
width: 500px;
max-width: 100%;
float: left;
}
.right{
border: 2px solid black;
width: 200px;
max-width: 100%;
float: right;
}
.footer{
background-color: red;
width: 100%;
border: 2px solid orange;
margin-top: 10px;
}
.clearfix:after{
content: "";
display: block;
clear: both;
}
.text_style{
padding: 10px;
text-align: center;
}
<main class="wraper">
<header class="header text_style">header</header>
<content class="clearfix">
<aside class="left text_style">left</aside>
<aside class="center text_style">center</aside>
<aside class="right text_style">right</aside>
</content>
<footer class="footer text_style">footer</footer>
</main>
footer c header-ом
сунуть вmain
?