Есть ли способ написать свой код, чтобы элемент не действовал как дочерний элемент для другого элемента?

Question

Элемент в моем коде действует как дочерний элемент для другой строки кода над ним, и я пытаюсь переписать код, поэтому элемент стоит сам по себе.Вот ссылка на мой Codepen:

https://codepen.io/DevinCassidy/pen/pBNNKY

Я попытался разорвать страницу и заключил в нее еще один элемент div.

\\\
    <div>
    <h2 id="Price">Price</h2>
    <section id="pricing">
    <div id="online">
    <div class="level">Online
    </div>
    <h2>$1,599.00</h2>
    <ol>
    <li>Plus Free Shipping</li>
    </ol>
    <button class="btn">Select</button>
    <br>
    <div id="in-store">
    <div class="level">In-Store
    </div>
    <h2>$1,599.00</h2>
    <ol>
    <li>*Out the door!*</li>
    </ol>
    <button class="btn">Select</button>
    </section>
\\\\\\

Answer 1

Они делают это, потому что они являются вложенными

Очищенный и правильный код с отступом выглядит следующим образом

<div>
  <h2 id="Price">Price</h2>
  <section id="pricing">
    <div id="online">
      <div class="level">Online</div>
      <h2>$1,599.00</h2>
      <ol>
        <li>Plus Free Shipping</li>
      </ol>
      <button class="btn">Select</button>
      <br>
      <div id="in-store">
        <div class="level">In-Store</div>
        <h2>$1,599.00</h2>
        <ol>
          <li>*Out the door!*</li>
        </ol>
        <button class="btn">Select</button>
      </div><!-- this div was missing -->
    </div><!-- this div was missing -->
  </section>
</div><!-- this div was missing -->

Через отступвы увидите, что на самом деле <div id="in-store"> является потомком <div id="online">.Вы должны сделать это следующим образом

<div>
  <h2 id="Price">Price</h2>
  <section id="pricing">
    <div id="online">
      <div class="level">Online</div>
      <h2>$1,599.00</h2>
      <ol>
        <li>Plus Free Shipping</li>
      </ol>
      <button class="btn">Select</button>
    </div><!-- inserted because <div id="online" should be closed -->
    <!-- <br> not needed, because <div>s are block elements -->
    <div id="in-store">
      <div class="level">In-Store</div>
      <h2>$1,599.00</h2>
      <ol>
        <li>*Out the door!*</li>
      </ol>
      <button class="btn">Select</button>
    </div>
  </section>
</div>

Я разветвил ваш кодовый блок и внес некоторые исправления: https://codepen.io/HerrSerker/pen/7cec5ac558e7c4fdaecbd8ac1d269178

1. Не закрывайте элементы <img>;неправильно: <img src=""></img>, правильно: <img src=""/> или просто <img src="">
2. Не используйте <br>, чтобы освободить место между элементами.Используйте CSS margin для этого
3. <br> теги не закрывают <div> элементы.Только </div> делает
4. Всегда делайте отступ для вашего кода.Codepen может сделать это автоматически для вас: либо пометьте весь код, а затем нажмите Shift Tab или нажмите на курсор вниз (v) в правом верхнем углу области кода HTML.и выберите Tidy HTML из выпадающего списка.
5. Codepen показывает неправильное вложение HTML-тегов, назначая неожиданным закрывающим тегам другой цвет фона.Смотрите здесь пример: https://codepen.io/HerrSerker/pen/3263405edba14d071b84d4860aac9a73