Remove extra white space from top in firefox

Question

Certain portions of the page looks different in firefox than chrome. This is what it looks like in chrome:

This is what it looks like in firefox:

HTML code:

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  margin-top: 0;
  padding-top: 0;
  overflow-x: hidden;
}
@media print {
  body {
    margin-top: 0 !important;
  }
}
body {
  background-color: white;
  color: black;
  padding: 0;
  margin: 0;
  min-height: 100%;
  min-width: 100%;
  overflow-x: hidden;
}
.rowa {
  padding: 10px;
  background-color: black;
  color: white;
  height: 100%;
  margin: 0;
}
#title {
  font-size: 36px;
  display: inline-block;
  color: white;
}

<nav class="navbar navbar-inverse " id="navtop">
  <div class="container-fluid rowa">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span> 
      </button>
      <a class="navbar-brand" href="#" id="title">title</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav navbar-right  menu " id="menu1">
        <li><a href="#" id="home1"> Home</a>
        </li>
        <li><a href="#" id="book"> Booking</a>
        </li>
        <li><a href="#" id="rate">Rates</a>
        </li>
        <li><a href="#" id="abt"> About us</a>
        </li>
        <li><a href="#" id="contact"> Contact us</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

I am not able to remove the extra space from top and the extra padding within the nav-bar.

I have set margin and padding to 0 for html and body in css, and min-width and min-height is 100%.

Also there is extra spacing between an image and form in firefox (for small screen devices).

How to I get rid of these extra spaces in firefox? Please help.

Answer 1

Adjust using height rule in CSS to id="menu1".