У меня два блока, у одного 20% ширины (width), у второго 80%, но в сумме они почему то дают больше чем 100% ширины экрана, в следствии чего второй блок съезжает вниз
<div class="sidebar">
<div class="sbr12">
<h2> Категории</h2>
<ul class="sbr">
<li> Фрукты</li>
<li> Овощи</li>
<li> Мясные</li>
<li> Сухофрукты</li>
<li> Зелени</li>
<li> Специи</li>
<li> Пекарьня</li>
<li> Соусы</li>
</ul>
</div>
</div>
<div class="citrus">
<div class="cit-in">
<p>Базар не выходя из дома</p>
</div>
</div>
.sidebar {
border: 1px solid black;
width: 100%;
height: 550px;
}
.sidebar ul {
direction: rtl;
}
.sidebar ul li {
padding: 15px 0px 15px 20px;
text-align: left;
cursor: pointer;
text-decoration: underline;
color: #5FE074;
}
.sidebar ul li h2 {
/* margin-left: 30px; */
position: relative;
display: block;
float: left;
color: black;
text-decoration: none;
}
.sidebar ul li::marker {
color: #A9A9A9;
content: '<';
cursor: pointer;
width: 100%;
}
.sidebar .sbr12 {
min-width: 20%;
border: 1px solid black;
float: left;
height: 100%;
}
.citrus {
font-size: 0;
background-size: cover;
float: left;
border: 1px solid black;
background: url(https://blogscdn.thehut.net/app/uploads/sites/443/2020/12/HERO_1607932333.jpg) no-repeat fixed center;
min-width: 80%;
height: 500px;
}
.cit-in{
font-size: 16px;
position: relative;
display: block;
text-align: center;
max-width: 100%;
margin-top: 16%;
background: #FFFFFFE5;
opacity: 90%;
height: 60px;
border: 1px solid black;
align-content: center;
}