Неисправность плавающего элемента слева

Question

У меня проблемы с перемещением раздела "main_articles" влево, так что рядом с ним справа появляется раздел "social", содержимое всегда запутывается или сворачивается.

вот ссылка на скачивание файлов сайта: https://ufile.io/pwd02

Буду признателен за решение, и извините, если я сделал что-то не так, я новичок здесь

Answer 1

HTML-код

<div class="container">
    <section class="main_articles">
      <h1>WHAT'S NEW:</h1>
      <article>
        <h2>News Article 1</h2>
        <p>Praesent tincidunt iaculis enim vitae mattis. Vivamus interdum nisl et felis condimentum, sed tempus ex consequat. Ut placerat, libero et aliquam tincidunt, lectus augue pharetra odio, nec laoreet magna ligula nec lectus. Sed accumsan rutrum auctor. Duis vel ex massa. Nunc placerat condimentum laoreet. Sed eu turpis convallis, ultrices nisl non, bibendum nulla. Mauris lobortis</p>
      </article>
      <hr/>
      <article>
        <h2>News Article 2</h2>
        <p>Praesent tincidunt iaculis enim vitae mattis. Vivamus interdum nisl et felis condimentum, sed tempus ex consequat. Ut placerat, libero et aliquam tincidunt, lectus augue pharetra odio, nec laoreet magna ligula nec lectus. Sed accumsan rutrum auctor. Duis vel ex massa. Nunc placerat condimentum laoreet. Sed eu turpis convallis, ultrices nisl non, bibendum nulla. Mauris lobortis</p>
      </article>
      <hr/>
      <article>
        <h2>News Article 3</h2>
        <p>Praesent tincidunt iaculis enim vitae mattis. Vivamus interdum nisl et felis condimentum, sed tempus ex consequat. Ut placerat, libero et aliquam tincidunt, lectus augue pharetra odio, nec laoreet magna ligula nec lectus. Sed accumsan rutrum auctor. Duis vel ex massa. Nunc placerat condimentum laoreet. Sed eu turpis convallis, ultrices nisl non, bibendum nulla. Mauris lobortis</p>
      </article>
    </section>
    <section class="social">
        <h1>FIND ME ON:</h1>
          <ul>
            <li><a href="#"><span class="fb">Facebook</span></a></li>
            <li><a href="#"><span class="tw">Twitter</span></a></li>
            <li><a href="#"><span class="inst">Instagram</span></a></li>
            <li><a href="#"><span class="ldin">LinkdIn</span></a></li>
          </ul>
    </section>
  </div>

CSS-код

.container{
      max-width:960px;
      margin-left:auto;
      margin-right:auto;
    }

    /* ARTICLES */
    .container .main_articles{
      max-width:600px;
      background:#ebdeb2;
    }
    .main_articles article{
      padding:5px 10px 5px 10px;
      margin-top: 20px;
    }
    .main_articles h1{
      font-size: 20px;
      text-align:center;
      padding:5px;
      background:#000000;
      color:#ffffff;
    }
    .main_articles h2{
      font-size: 18px;
      margin-bottom:0px;
      text-decoration: underline;
    }
    .main_articles p{
      font-size: 15px;
      margin-top:0px;
    }
    /*END OF ARTICLES STYLES*/

    /* SOCIAL BOX STYLES */
    .container .social{
      height:220px;
      max-width:350px;
      margin-top:20px;
      background:#ebdeb2;
    }
    .social h1{
      font-size: 20px;
      text-align:center;
      padding:5px;
      background:#000000;
      color:#ffffff;
    }
    .social li{
        list-style: none;
        text-align: center;
        font-size:30px;
        font-weight: bold;
        margin-right:25px;
    }

Answer 2

Вам просто нужно определить таблицу и разбить экран на две колонки.Добавьте эти строки в ваш файл CSS.

.row:after{
content:"";
display: table;
clear: both;
}
.column{
float: left;
width: 47%;
padding: 10px;
height: 100%;
}

и тогда структура вашего html-файла должна быть такой:

enter code here
<div class="container">
  <div class="row">
    <div class="column">
     <section class="main_articles">
     </section>
    </div>

   <div class="column">
    <section class="social">
    </section>
   </div>    
  </div>    
</div>