Html 移动设备上的导航栏崩溃

当我在智能手机上查看HTML页面时，导航栏会被我的“导航栏折叠”的“h2”和“img”所强制

我不明白为什么会这样。有人有什么建议吗

以下是html代码：

  <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>

---

以下是“img”作为更好的参考：

您尚未关闭li。请结账。另外，通过搜索文本“你好，我是贾斯汀”

检查代码中没有

h2

和

img

。

h2

是否有

位置：绝对？无位置：相对位置；我希望是这样，但什么也没发生：(
    .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;
}