Bootstrap's NAV element inside display:table-cell element has a wrong alignment on Firefox

Question

Consider this HTML markup (with Bootstrap lib included):

<div class="container">
  <div class="card">
    <ul class="nav list">
      <li class="element">
        <a href="#">Element</a>
        </li>
      <li class="element">
      <a href="#">Another element</a>
        </li>
    </ul>
    <div class="content">
     <div>
       First content
     </div>
     <div>
       Second content
     </div>
    </div>
  </div>
</div>

and this CSS code:

.container { 
  display: table;
  layout: table-fixed;
}
.card {
  display: table-row;
  width: 300px;
}

li {
  display: inline-block;
  background-color: red;
  padding: 20px;
}

.list {
  display: table-cell;
  width: 100px;
  white-space: nowrap;
}

.content {
  display: table-cell;
  width: 200px;
  background-color:blue;
  height: 200px;
}

I have googled a lot already but still can't get a clue why Firefox displays this code different than Chrome. It just giving a some kind of padding/margin for table-cell div with navbar and then it is not aligned with the other, content table-cell on top. See pics:

Did anybody experience that type of problem with Firefox/Bootstrap. I will appreciate any help, thanks in advance!

Live demo: https://jsfiddle.net/9cztjd6o/3/

Answer 1

This gap is an empty text line which is caused by default bootstrap ":before" styles. You can hide it with something like that:

.container:before, .list:before {
  display: none;
}