Html 引导导航条没有响应

第一次使用Bootstrap设计网站时，发现菜单有问题。我已经深入了解了该站点在不同设备上的外观，一旦它达到800 x 600，顶部的菜单就不会堆叠在顶部。我已经附上了3张图片，其中只有第一张图片看起来是正确的。我还将视口初始比例=1包含在我在另一篇文章中看到的头标记中

请有人给我指出正确的方向来纠正代码吗

<nav class="navbar navbar-expand-md">
    <div class="container-fluid">
    <a class="navbar-brand text-left" href="index.html">iStudy University <i class="fas fa-graduation-cap"></i></a>


        <div class="navbar-nav ml-auto">
        <a id="menu-nav" class="nav-item nav-link px-3" href="index.html"><i class="fas fa-home" ></i> Home</a>
        <a id="menu-nav" class="nav-item nav-link px-3" href="#"><i class="fas fa-info-circle"></i> About</a>
        <a id="menu-nav" class="nav-item nav-link px-3" href="contact.html"><i class="fas fa-envelope"></i> Contact Us</a>

        <form class="form-inline px-2" action="#">
            <button class="btn btn-dark" type="submit">Sign Up</button>
            <button class="btn btn-dark" type="submit"><i class="fas fa-sign-in-alt"></i>Login</button>
        </form>
        </div>
    </div>
</nav>


    #menu-nav{
color: white;
}

/*TO COME BACK TO - BACKGROUND IMAGE TO HOMEPAGE*/
.site-header {
  background: url(img/home-header.jpg) no-repeat center;
  background-size: cover;
        }

.site-header .layout-hero {
  min-height: 100vh;
}

.navbar, .btn-dark {
  font-family: 'Amatic SC', cursive;
  font-weight: 800;
  border-radius: 25px;
  color: white;
}

.navbar-brand {
  font-size: 2.5rem;
  font-family: 'Amatic SC', cursive;
  font-weight: 600;
  color: white;
}

/*This is for the i in the logo name */
.navbar-brand::first-letter {
  font-family: 'Charm', cursive;
  color: #f5f5f5;
  text-shadow: 1px 1px #45b39d;
}


/*This is to override the logo defult blue */
.navbar-brand:hover {
  color: white;
}

/*Just for the menu */
.navbar-nav {
  background-image: linear-gradient(to bottom right, #5dade2, #45b39d);;
  padding: 4px;
  border-radius: 25px;
  box-shadow: 1px 2px 1px slategrey;
}

.navbar-collapse .nav-link{
  display: inline-block;
  background :#45b39d;
}
/*for small  devices*/

@media(max-width: 767px){
  .navbar-brand {
    font-size: 2.1rem;
  }

  .navbar-dark .navbar-toggler {
    border-color: rgba(255,255,255,.5);
  }

}

注册
登录
#菜单导航{
颜色：白色；
}
/*返回到-背景图像到主页*/
.网站标题{
背景：url（img/home header.jpg）无重复中心；
背景尺寸：封面；
}
.站点标题.布局英雄{
最小高度：100vh；
}
.navbar，.btn暗{
字体系列：“Amatic SC”，草书；
字号：800；
边界半径：25px；
颜色：白色；
}
.navbar品牌{
字体大小：2.5rem；
字体系列：“Amatic SC”，草书；
字号：600；
颜色：白色；
}
/*这是用于标识名称中的i*/
.navbar品牌：：第一个字母{
字体系列：“魅力”，草书；
颜色：#F5；
文本阴影：1px 1px#45b39d；
}
/*这是为了覆盖徽标defult blue*/
.navbar品牌：hover{
颜色：白色；
}
/*只是为了菜单*/
.导航栏导航{
背景图像：线性渐变（右下角，#5dade2，#45b39d）；；
填充：4px；
边界半径：25px；
盒影：1px 2px 1px灰色；
}
.导航栏折叠.导航链接{
显示：内联块；
背景#45b39d；
}
/*用于小型设备*/
@介质（最大宽度：767px）{
.navbar品牌{
字号：2.1rem；
}
.导航栏暗.导航栏切换器{
边框颜色：rgba（255255255,5）；
}
}

如果菜单中的所有项目都是您想要的，请将其添加到您的媒体查询中

 @media(max-width: 767px){
    // the code to add
    .form-inline{
       display:flex;
       flex-direction: column;
     }
   // end
  }

---

我只是想澄清一下，你是不是想拿到iStudy大学上面的菜单？或者说它堆叠不正确是什么意思？对不起，菜单在第一个屏幕截图上的位置是可以的，但是一旦设备更改为较小的屏幕尺寸，菜单就不会堆叠在顶部，而是一些菜单链接并排排列。不清楚您希望菜单如何显示您希望菜单显示为“汉堡”按钮吗？抱歉，因此，菜单在大屏幕上的显示方式是绝对好的，但是一旦设备缩小，我希望菜单选项可以放在另一个下面，就像：-主页-关于-联系我们-注册-登录堆叠在另一个下面一样，我假设bootstrap会自动做到这一点。如果这不是一个很好的建议，我想做什么，一个小屏幕上的汉堡菜单将是伟大的？嗨，埃拉德巴，谢谢你这么多，这已经在每一个屏幕大小除了800 x 600，有一个单独的CSS行我可以添加到排序屏幕大小了。你是一个天才：）是的，因为你严格要求它的最大宽度：767px你需要改变最大宽度：超过800，如果它为你工作，我会很高兴看到绿色的V勾选旁边我的答案