Невозможно получить столбцы, чтобы они соответствовали ширине сетки

Question

Я использую семантический интерфейс и не могу правильно настроить решетки. Согласно документам, Semantic UI использует 16 столбцов, и я стараюсь иметь столбец шириной three с левой стороны, а рядом с ним - столбец шириной thirteen. Вот как это выглядит (рис обрезается):

Я использовал Bootstrap в течение длительного времени, и теперь пытается использовать семантический интерфейс. Что мне не хватает? Demo

<header> 
    <div class="mobile hidden"> 
     <div class="ui container"> 
      <div class="ui grid"> 
       <div class="eight column"> 
        <div class="ui secondary menu"> 
         <a class="active item"> 
          Home 
         </a> 
         <a class="item"> 
          Messages 
         </a> 
         <a class="item"> 
          Friends 
         </a> 
         <div class="right menu"> 
          <div class="item"> 
           <div class="ui icon input"> 
            <input type="text" placeholder="Search..."> 
            <i class="search link icon"></i> 
           </div> 
          </div> 
          <a class="ui item"> 
           Logout 
          </a> 
         </div> 
        </div> 
       </div> 
      </div> 
     </div> 
    </div> 
</header> 
<div class="clearing"></div> 
<div class="ui container"> 
    <div class="mobile hidden"> 
     <div class="ui grid row"> 
      <aside class="three column red"> 

      </aside> 
      <section class="thirteen column olive"> 
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab doloremque illum quas? Dolore dolorem dolorum ipsum? Commodi error excepturi laboriosam magnam nobis odio suscipit unde! Alias atque dicta reiciendis sapiente! 
      </section> 
     </div> 
    </div> 
</div> 

Answer 1

вам не хватает два дополнительных класса wide и field в вашем HTML элементе. измените, как показано ниже

<aside class="three wide field column red"></aside> 
<section class="thirteen wide field column olive"> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab doloremque illum quas? Dolore dolorem dolorum ipsum? Commodi error excepturi laboriosam magnam nobis odio suscipit unde! Alias atque dicta reiciendis sapiente! 
</section>