H2 imposes on mobile crash on mobile

When I view my HTML page on my smartphone, the nav bar is forced by the "h2" and "img" of my "crafted collapse".

I cannot understand why this is so. Anyone have any suggestions?

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" link for a better link: