title: Jekyll, Markdown not rendering content in the normal way (top to bottom), but instead all to the right
body: <p><a href="https://i.stack.imgur.com/wTivc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/wTivc.png" alt="image"></a></p>
  
  <p>My Markdown (with front matter) is this:</p>
  
  <pre><code>---
  layout: post
  title:  "Facultad de Lenguas y Letras"
  date:   2018-01-18 24:00:00 -0600
  categories: animacion
  permalink: facultad-de-lenguas-y-letras-i
  thumbnail: https://dl.dropbox.com/s/4ou7ndl36vxdaa0/facultad.gif?raw=1
  ---
  
  &lt;h2 class="fuente-fjalla-titulo"&gt;Geosmina - Facultad de Lenguas y Letras I&lt;/h2&gt;
  
  (youtube video with markdown format)
  
  Hola.
  </code></pre>
  
  <p>My post layout is:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="es"&gt;
  
  {%include head.html%}
  
  &lt;body&gt;
      &lt;!-- Imagen header que dice Animanoir --&gt;
      {%include header.html%}
  
      &lt;!-- El sidebar y el contenido  --&gt;
      {%include sidebar-main-post.html%}
  
      &lt;!-- Footer normal --&gt;
      {%include footer.html%}
  
      &lt;!-- El jQuery de Bootstrap 4.0.0beta --&gt;
      {%include js.html%}
  
      {%include hogarjq.html%}
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>And this:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;nav class="col-sm-3 "&gt;
        &lt;div class="col-sm-12" id="fixed-sidebar"&gt;
          &lt;!-- &lt;a href="index.html"&gt;&lt;img id="home-logo" src="../../media/logo-prueba.jpg" alt="Logo de Animanoir"&gt; &lt;/a&gt; --&gt;
          &lt;ul&gt;
            &lt;li class="fuente-fjalla ul-personalizada"&gt;Animación&lt;/li&gt;
            &lt;li class="fuente-fjalla ul-personalizada"&gt;Ilustración&lt;/li&gt;
            &lt;li class="fuente-fjalla ul-personalizada"&gt;Interacción&lt;/li&gt;
            &lt;br&gt;
            &lt;li class="fuente-fjalla ul-personalizada"&gt;Blog&lt;/li&gt;
            &lt;br&gt;
            &lt;li class="fuente-fjalla ul-personalizada"&gt;Acerca&lt;/li&gt;
            &lt;li class="fuente-fjalla ul-personalizada"&gt;Contacto&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  
      &lt;div class="col-sm-9" id="main-content"&gt;
  
        &lt;div class="row"&gt;
  
          &lt;h2&gt;{{ post.title }}&lt;/h2&gt;
  
          {{content}}
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  |&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS is this:</p>
  
  <pre><code>#main-content {
      color: white;
      font-family: 'Average', serif;
      font-size: 1em;
  }
  </code></pre>
  
  <p>The rendered HTML is:</p>
  
  <pre><code>&lt;body&gt;
      &lt;!-- Imagen header que dice Animanoir --&gt;
      &lt;header id="header-home"&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-sm-12 text-center"&gt;
          &lt;a href="home.html"&gt;&lt;img id="header-logo" class="img-fluid" src="../media/animanoir-logo-blanco-chico.png" alt=""/&gt; &lt;/a&gt; 
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  
      &lt;!-- El sidebar y el contenido  --&gt;
      &lt;div class="container"&gt;
    &lt;div class="row"&gt;
      &lt;nav class="col-sm-3 "&gt;
        &lt;div class="col-sm-12" id="fixed-sidebar"&gt;
          &lt;!-- &lt;a href="index.html"&gt;&lt;img id="home-logo" src="../../media/logo-prueba.jpg" alt="Logo de Animanoir"&gt; &lt;/a&gt; --&gt;
          &lt;ul&gt;
            &lt;li class="fuente-fjalla ul-personalizada"&gt;Animación&lt;/li&gt;
            &lt;li class="fuente-fjalla ul-personalizada"&gt;Ilustración&lt;/li&gt;
            &lt;li class="fuente-fjalla ul-personalizada"&gt;Interacción&lt;/li&gt;
            &lt;br&gt;
            &lt;li class="fuente-fjalla ul-personalizada"&gt;Blog&lt;/li&gt;
            &lt;br&gt;
            &lt;li class="fuente-fjalla ul-personalizada"&gt;Acerca&lt;/li&gt;
            &lt;li class="fuente-fjalla ul-personalizada"&gt;Contacto&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/nav&gt;
  
      &lt;div class="col-sm-9" id="main-content"&gt;
  
        &lt;div class="row"&gt;
  
          &lt;h2&gt;&lt;/h2&gt;
  
          &lt;h2 class="fuente-fjalla-titulo"&gt;Geosmina - Facultad de Lenguas y Letras I&lt;/h2&gt;
  
  &lt;p&gt;&lt;a href="http://www.youtube.com/watch?v=be73Nr5HIss"&gt;&lt;img src="http://img.youtube.com/vi/be73Nr5HIss/0.jpg" alt="IMAGE ALT TEXT HERE" /&gt;&lt;/a&gt;&lt;/p&gt;
  
  &lt;p&gt;Hola.&lt;/p&gt;
  
  
      &lt;/div&gt;
  
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
      &lt;!-- Footer normal --&gt;
      &lt;!--footer--&gt;
  &lt;footer&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-sm-12 text-center"&gt;
                  &lt;p id="copyrights"&gt;Animanoir 2018 &amp;copy;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/footer&gt;
  &lt;!--fin de footer--&gt;
  
      &lt;!-- El jQuery de Bootstrap 4.0.0beta --&gt;
      &lt;!--Bootstrap jQuery--&gt;
  &lt;script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;!-- &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"&gt;&lt;/script&gt; --&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"&gt;&lt;/script&gt;
  
      &lt;script async src="js/hogarjq.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>I'm using <strong>Bootstrap 4</strong>.</p>
  
  <p>I thought Markdown would render everything exactly as it is written, not trying to fill a row until it gets full, and then passing to the next one.</p>