title: How to position figcaption under the image
body: <p>I am trying to position my figcaption under the img. 
  I don't know why does it go to the right. I have other images on the page and their figcaption doesn't go to the right, it's under the image, but on this one it's not under and it should be. Can somebody help me?</p>
  
  <p>Here is my section of HTML code: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code> figure{
          margin: 0;
      }
  
      #fig_moje_slike{
          font-size: 9px;
          text-align: left;
          width: 50%;
          margin: 0;
      }
  
      #sadrzaj{
          display: inline-block;
          margin: 3em auto;
      }
  
      #sadrzaj ul{
          display: block;
          float: left;
      }
  
      #sadrzaj ul li{
          margin: 15px 0;
      }
  
      #slika_mene{
          width: 14%;
          height: auto;
          display: block;
          float: left;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="sadrzaj"&gt;
              &lt;aside&gt;
                  &lt;figure&gt;
                      &lt;img src="slike/ja.jpeg" alt="slika mene" id="slika_mene"&gt;
                      &lt;figcaption id="fig_moje_slike"&gt;Moja slika&lt;/figcaption&gt; 
                  &lt;/figure&gt;
              &lt;/aside&gt;
              &lt;ul&gt;
                  &lt;li&gt;bla bla&lt;/li&gt;
                  &lt;li&gt;bla bla&lt;/li&gt;
                  &lt;li&gt;bla bal&lt;/li&gt;
                  &lt;li&gt;blabla&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/section&gt;
  
     </code></pre>
  </div>
  </div>
  </p>
  
  <p>Picture of result:
  <a href="https://imgur.com/a/XXgsP" rel="nofollow noreferrer">http://imgur.com/a/XXgsP</a></p>