Bootstrap columns not showing correctly in Firefox

Issue

My Bootstrap grid is working fine in Safari and Chrome, but not in Mozilla Firefox. It works fine when I slightly minimize it, but not on fill screen size.

<div class="container-fluid">
  <div class="row">
    <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8 col-xl-8">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
            1
          </div>
          <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 col-xl-6">
            2
          </div>
          <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
            3
          </div>
        </div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 col-xl-4">
      <div class="container">
        <div class="row">
          <div class="col-xs-12 col-sm-4 col-md-12 col-lg-12 col-xl-12">
            a
          </div>
          <div class="col-xs-12 col-sm-4 col-md-12 col-lg-12 col-xl-12">
            b
          </div>
          <div class="single-offer col-xs-12 col-sm-4 col-md-12 col-lg-12 col-xl-12">
            c
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Do you have any ideas why this occurs?

Solution

It turns out that it wasn't about this part at all. The thing was that the row above had 1px of free space, so Firefox tried to jam this part into that row which messed it all up.

Solution:

.container-fluid>.row {clear:both}

Sorry everyone for misleading.

Answered By - ivanacorovic