title: border-bottom is not occupying the full width
body: <p>I want to have a menu occupying the full width of the page in medium and larger devices and in smaller devices I want to display the menu items vertically. Im using a grid for this but I also want to have a red border-bottom below the active list item (positioned a the list item bottom) and on hover. But this red border-bottom is not occupying the full width of the list item. Do you know why? </p>
  
  <p>This is the example: <a href="https://jsfiddle.net/9o1n8fmm/" rel="nofollow noreferrer">https://jsfiddle.net/9o1n8fmm/</a></p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div  style="background-color:yellow;"&gt;
    &lt;div class="container"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col-md-12"&gt;
          &lt;ul class="MenuList"&gt;
            &lt;li&gt;&lt;a&gt;Item&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a&gt;Item&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a&gt;Item&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a&gt;Item&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>ul{
    list-style:none;
  }
  .MenuList{
    display: flex;
    align-content: center;
    justify-content: space-around;
    li{
      border-left: 1px solid gray;
      padding: 20px 15px 20px 15px;
  
      a{
        color:#fff;
      }
      &amp;:first-child{
        border-left: 0;
        border-bottom: 5px solid red;
      }
      &amp;:hover{
        border-bottom: 5px solid red;
        cursor: pointer;
      }
    }
  }
  </code></pre>