我讀取了根據最近塊容器的寬度計算的百分比值，那么為什么我的li元素會溢出，以及如何修復它，以便我可以使用百分比值來響應。

*{
  margin:0;
  padding:0; 
  box-sizing:border-box; 
}
body{
  background-color:yellow;
  width:100%;
  height:100vh;
}

 li{
  margin: 0 10% 0 0;
  font-size:20px;
  color:black;
  font-weight:bold;
 }

 #logo{
  font-size: 40px;
  height:100%;
  display:flex;
  align-items:center;
 }

 .navigation{
  width:100%;
  height:70px;
  display:flex;
  align-items:center;
  justify-content:space-between;
 }

 #list-items{
  display:flex;
  list-style-type:none;
 }

<nav class="navigation">
        
          <div id="logo">Ba-nna</div>
        <ul id="list-items">
            <li>Food</li>
            <li>Events</li>
            <li>About</li>
            <li>Fun</li>
            <li>Merch</li>
        </ul>
        
    </nav>

要在不過度調整的情況下使用li元素的邊距百分比值，必須確保li元素所占的總寬度不超過可顯示內容寬度的100%。