我如何使我的HTML导航栏标题移动友好

Question

嘿，除了导航栏外，我页面的其余部分都适合移动设备。有人可以纠正我的错误吗？在Web平台上，导航效果不错，但在移动平台上，它与页面的其余部分不符。我在下面包括了CSS和HTML代码。 我不知道如何使它适合移动设备，它只是伸出来使移动页面更大。

    <header>
        <div class="navigation-bar">
            <div id="navigation-container">
                <img src="logo.png" alt="Trulli" width="400" height="80">
                <ul>
                    <li><a href="https://www.mhric.org/about/about-mhric">About</a></li>
                    <li><a href="https://www.mhric.org/services">Services</a></li>
                    <li><a href="https://www.mhric.org/training">Training</a></li>
                    <li><a href="https://www.mhric.org/directory">Departments</a></li>
                    <li><a href="https://www.mhric.org/resources">Recources</a></li>
                    <li><a href="https://www.mhric.org/career-opportunities">Career Opportunities</a></li>
                    <li><a href="https://www.mhric.org/our-partners">Partners</a></li>
                    <li><a href="https://www.mhric.org/links/links">Vendor Links</a></li>
                </ul>
            </div>
        </div>
    </header>

#navigation-container {
	width: 1600px;
	margin: 0 auto;
	height: 100px;
  }
  
  .navigation-bar {
	background-color: #ffffff;
	height: 70px;
	width: 100%;
	text-align:center;
  }
  .navigation-bar img{
  float:left;
  }
  .navigation-bar ul {
	padding: 0px;
	margin: 0px;
	text-align: center;
	display:inline-block;
	vertical-align:top;
  }
  
  .navigation-bar li {
	list-style-type: none;
	padding: 0px;
	display: inline;
  }
  
  .navigation-bar li a {
	color: black;
	font-size: 16px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	text-decoration: none;
	line-height: 70px;
	padding: 5px 15px;
	opacity: 0.7;
  }
  
  #menu {
	float: right;
  }