Два блока в сумме дающих 100% занимают больше, чем 100%)

Question

У меня два блока, у одного 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;
}

Answer 1

Во первых, надо поместить оба эти блока в один родительский див, который будет служить им обёрткой, и этому родителю задать дисплей флекс. Во вторых, вы задали не максимальную или фиксированную ширину, а минимальную, что означает, что блоки могут иметь любую ширину, но не меньше указанной. В конечном итоге должно быть что-то вроде этого (извиняюсь за кривые отступы)

 <div class="wrapper">
   <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>
    </div>

.wrapper {
 display: flex;
 justify-content: space-between;
}

.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://...);
  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;
  }

БЛОГ НА HUSL

Два блока в сумме дающих 100% занимают больше, чем 100%)

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