title: Why does this span have a bigger height than it's parent
body: <p>I'm doing a progression throught the site bar and I'm having a problem. There are <strong>four span elements</strong> that represents the sections of the frontpage, when you click on one of them it scroll to that section position. The problem is for some reason, <strong>the span element are taller than the div cointaining</strong> it, and for that, I can't align it vertically. It ain't a problem until you try to use the website on smaller resolutions, in wich, the span elements overflows the div.</p>
  
  <p><a href="https://i.stack.imgur.com/Z2CIs.png" rel="nofollow noreferrer">Here</a> is what I'm talking about</p>
  
  <p>See that the right attribute is because of a script that positioned the span according to the section position. </p>
  
  <p>And <a href="https://i.stack.imgur.com/CFUs0.png" rel="nofollow noreferrer">here</a> is where the problem became obvious</p>
  
  <p>Here is the HTML :</p>
  
  <pre><code>&lt;header id="masthead" class="site-header" role="banner" style="position: relative; top: auto;"&gt;
  &lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;
  
                  &lt;div id="progressDiv"&gt; 
                      &lt;span id="progBar"&gt;
                      &lt;/span&gt;
                      &lt;div id="SectionsPos"&gt; 
                        &lt;a href="/#features"&gt;
                          &lt;span id="novedPos" class="sectPos"&gt; Novedades &lt;/span&gt;
                        &lt;/a&gt;
                        &lt;a href="/#about"&gt;
                          &lt;span id="redesPos" class="sectPos tooBig"&gt; Redes Sociales &lt;/span&gt;
                        &lt;/a&gt;
                        &lt;a href="#ProductosPrinc"&gt;
                          &lt;span id="prodPos" class="sectPos"&gt; Productos &lt;/span&gt;
                        &lt;a href="#Contacto"&gt;
                          &lt;span id="contPos" class="sectPos"&gt; Contacto &lt;/span&gt;
                        &lt;/a&gt;
                      &lt;/div&gt;      
                  &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>And here is the CSS :</p>
  
  <pre><code>    #progressDiv {
      display: block;
      border: solid 1px;
      border-color: #d9b25f;
      position: relative;
      width: 100%;
      height: 10vh;
  }
  
  #progBar {
      height: inherit;
      display: block;
      width: 0%;
      background: #d9b25f;
      max-width: 100%;    
  }
  
  
  #SectionsPos{
      display: block;
      position: absolute;
      width: 100%;
      top: 50%;
      height: 10vh;
      margin-top: -5vh;
  }
  
  .sectPos {
      font-weight: 900;
      color: white!important;
      position: absolute;
  }
  </code></pre>
  
  <p>Excuse my English, it is not my native language, if there is something that it's not completely clear please let me know and I'll  try to explain myself better</p>