如何调整导航栏HTML的缩放

当我放大我的页面时，导航栏会乱七八糟，一些选项会出现在其他选项的下方

CSS

HTML

我怎样才能防止这种情况发生在像图像这样的元素较多的场合？

---

我需要包括一些库，比如Bootstrap，还是仅仅需要更改CSS

将

ul

宽度设置为100%和

li

宽度设置为25%将使其调整为覆盖屏幕

ul {
    width: 100%;
}

li {
    width: 25%;
}

---

如果缩放图像，图像将与导航栏重叠。我怎样才能防止这种情况发生呢？

    <ul>
  <li><a  href="home.html">HOME</a></li>
  <li><a href="#news">NEWS</a></li>
  <li><a href="#contact">CONTACTS</a></li>
  <li><a href="#about">ABOUT</a></li>
</ul>

ul {
    width: 100%;
}

li {
    width: 25%;
}