Html 引导菜单卡住了

我开始用bootstrap创建一个简单的网页。我是网络开发的初学者。我的第一个问题是：

• 徽标图像：我不知道如何使其响应。我错过了什么。我尝试了不同的位置：绝对、静态、相对。没有什么变化。我想有它的反应，直到中屏幕和消失后的小屏幕

• 导航菜单：我从引导文档中导入了一个菜单。我试着让它浮起来，但它不动。我想为移动设备创建一个没有任何背景的简单菜单

请毫不犹豫地指出我代码中的每一个错误。我从2015年开始在Coursera学习一门网页设计课程，所以事情可能不是很实际。 我该怎么做才能做好呢

谢谢你的帮助

这是我的页面

这是我的css：

 enter code here

 *{
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 }

 body{
 font-family: font-family: 'Montserrat', sans-serif;
 font-size: 1.2em;
 }


 h2{
 font-family: 'Montserrat', sans-serif;
 margin-top: 3%;
 text-align: center;
 }

 a{
 text-decoration: none;
 color:#564C3A;
 }

 a:hover {
 color: #93918C;
 text-decoration: none;
 }

 article{
 text-align: justify;
 margin: 3% 10% 3% 10%;
 }

 article p{
 margin-top: 3%;
 }

 #header-nav{
 background-color: #F5F3EF;
 padding: 0%;
 }

 #logo-img{
 background: url('../images/permacultivons-logo.png') no-repeat;
 width: 160px;
 max-width: 100%;
 height: 180px;
 margin: 0% 0 -5% -150%;
 }

.navbar-brand{
padding-top: 30px;
margin-left: -40%;
}

.navbar-brand h1{
font-family: 'Indie Flower', cursive;
font-size: 2.5em;
text-shadow: .5px .5px .5px #000;
line-height: .75;
margin-top: 0;
margin-bottom: 0;
}

.navbar-brand p{
font-family: 'Indie Flower', cursive;
font-size: 1.5em;
margin-top: 25px;
margin-bottom: 0;
line-height: .75;
}

---

看看。@WaisKamal谢谢你的回答。我知道媒体查询，但我对引导框架（行、列等）有点困惑。幸运的是，我能找到一门最近的课程。我将以一个更好的基础重新开始我的项目：看一看.@ WaisKamal，谢谢你的回答。我知道媒体查询，但我对引导框架（行、列等）有点困惑。幸运的是，我能找到一门最近的课程。我将以更好的基础重新开始我的项目：