Как сделать мой заголовок панели навигации HTML удобным для мобильных устройств?

Question

Привет, ребята, остальная часть моей страницы удобна для мобильных устройств, кроме панели навигации. Может кто-нибудь исправить меня на моей ошибке. На веб-платформе нет ничего плохого в плохой навигации, но на мобильной платформе она просто не вписывается в остальную часть страницы. Я включил код 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;
  }