Уже попробовал разные способы, но никак не получается расположить их ровно в столбик. То блок какой то выпадет, то не перемещаются к левой стороне.
body{
width: 100%;
margin: 0;
padding: 0;
}
header{
width: 100%;
height: 100%;
background-color: #32508C;
}
.wrapper{
width: 78.125%;
height: 100%;
margin: 0 auto;
border-right: 1px solid;
border-left: 1px solid;
}
header .main-panel{
width: 100%;
height: 70px;
}
.logo{
margin-top: 10px;
margin-left: 20px;
float: left;
}
.main-panel .logo .textLogo{
font-family: sans-serif;
font-size: 40px;
margin: 0;
}
.navig{
float: right;
}
.navig ul li{
margin-right: 30px;
display: block;
float: left;
}
.navig li a{
text-decoration: none;
font-family: Arial;
font-size: 20px;
color: #E5BA1B;
}
.all-sect{
width: 100%;
height: 100%;
background-color: #F9FAE7;
}
.container{
width: 80%;
height: 1000px;
background-color: #F4B54E;
float: left;
}
.sidebar{
width: 20%;
height: 1000px;
background-color: #FAFA7E;
float: right;
padding: 10px;
box-sizing: border-box;
}
.sidebar .cont{
width: 100%;
display: block;
border: 2px solid;
border-radius: 20px;
color: red;
padding: 10px;
box-sizing: border-box;
}
.cont a{
font-family: cursive;
font-size: 18px;
color: black;
margin-bottom: 10px;
display: block;
text-decoration: none;
}
.container{
padding: 20px;
box-sizing: bordger-box;
}
.container .cont-1{
width: 57%;
height: 300px;
border: 1px solid;
float: left;
}
.container .cont-2{
width: 42%;
height: 300px;
border: 1px solid;
float: right;
}
.container .cont-3{
width: 100%;
height: 300px;
border: 1px solid;
float: left;
margin-top: 15px;
}
.contain{
padding: 20px;
box-sizing: border-box;
text-align: center;
}
.container p{
font-size: 20px;
margin: 0;
}
@media screen and (max-width: 1150px){
.sidebar{
display: none;
}
.container{
width: 100%;
}
}
@media screen and (max-width: 900px){
.wrapper{
width: 100%;
}
}
@media screen and (max-width: 700px){
.navig{
display: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="style.css">
<script src="Script.js"></script>
</head>
<body>
<header>
<div class="wrapper">
<div class="main-panel">
<div class="logo">
<p class="textLogo">Logo</p>
</div>
<nav class="navig">
<ul>
<li>
<a href="">Главная</a>
</li>
<li>
<a href="">Новости</a>
</li>
<li>
<a href="">Каталог</a>
</li>
<li>
<a href="">Магазин</a>
</li>
<li>
<a href="">О нас</a>
</li>
</ul>
</nav>
</div>
</div>
</header>
<section class="all-sect">
<div class="wrapper">
<div class="container">
<div class="cont-1 contain">
<p>Color codes are ways of representing the colors we see everyday in a format that a computer can interpret and display. Commonly used in websites and other software applications, there are a variety of formats, including Hex color codes, RGB and HSL values, and HTML color names, amongst others.</p>
</div>
<div class="cont-2 contain">
<p>Color codes are ways of representing the colors we see everyday in a format that a computer can interpret and display. Commonly used in websites and other software applications, there are a variety of formats, including Hex color codes, RGB and HSL values, and HTML color names, amongst others.</p>
</div>
<div class="cont-3 contain">
<p>Color codes are ways of representing the colors we see everyday in a format that a computer can interpret and display. Commonly used in websites and other software applications, there are a variety of formats, including Hex color codes, RGB and HSL values, and HTML color names, amongst others.</p>
</div>
</div>
<div class="sidebar">
<div class="cont">
<a href="">Адаптивность</a>
<a href="">Навигация</a>
<a href="">Сотрудничество</a>
<a href="">Контакты</a>
<a href="">О нас</a>
</div>
</div>
</div>
</section>
</body>
</html>