Мои элементы html не находятся в нужном месте

Я использую классы bootstrap и по какой-то причине они не работают.

Это объединенные шаблоны. Переключаемыми являются <div class="col-md-8"> и <div class="col-md-4" style="margin: 0;">

    <main role="main" class="container-flex" style="margin-left:60px; overflow:hidden;">
      <div class="row">
        <div class="col-md-8">
          ...
        </div>
        <div class="col-md-4">
          <div class="content-section">
           ...
          </div>
        </div>
      </div>


.content-section {
    margin: 0;
    background: rgb(255, 255, 255);
    padding: 10px 20px;
    border: 1px solid rgb(212, 210, 210);
    border-radius: 3px;
    margin-bottom: 20px;
    word-wrap: break-word;
    overflow: hidden;
  }

Странно то, что если я делаю комментарий, он сам себя исправляет.

Picture without comment

Picture with comment

Я перепробовал все, что умею, но не могу понять, как это сделать.

После просмотра ваших примеров HTML я вижу, что в Source With Comment ваш контейнер col-md-4 находится внутри строки, в другом примере он находится вне строки.

Не зная, как генерируется ваш HTML, я не могу сказать, что именно не так, но, по крайней мере, именно поэтому, судя по вашим примерам.

Вернуться на верх