h2 imposing over navbar collapse on mobile

When I view my HTML page on my smartphone, the navbar gets imposed by the 'h2' and 'img' of my 'navbar-collapse'.

I cannot figure out why it is like that. Does anyone have any suggestion?

Here is the html code:

  <nav class="navbar navbar-default" id="my-navbar">
<div class="container">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle"  data-toggle="collapse" data-target="#navbar-collapse">
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a href="index.html" class="navbar-brand">J</a>
  </div>
  <div class="collapse navbar-collapse" id="navbar-collapse">
    <ul class="nav navbar-nav">
      <li><a href="profile/index.html">profile</a>
      <li><a href="work/index.html">work</a>
      <li><a href="resume/index.html">resume</a>
    </ul>
  </div>
</div>

CSS

    .navbar-default {
  height: 5em;
  background-color: #fff;
  border: transparent;
  border-radius: 0;
}

nav .navbar-header a {
  padding: 0.5em 0 0 1em;
  font-size: 3em;
}

#navbar-collapse {
  background: #fff;
  z-index: 1;
}

.navbar-nav {
  padding-top: 0.5em;
  float: right;
  z-index: 2;
}

.navbar-nav ul {
  z-index: 2;
}

Here is the 'img' for a better reference: