Как сохранить элементы навигационной панели от перекрытия?

Question

Я использую php для включения навигационной панели на веб-сайт. Я хочу, чтобы слова в навигационной панели не перекрывались при изменении размера браузера. Вот мой HTML:

<div class="nav-container"> 
    <nav> 
    <ul> 
     <li> 
     <a class='active' data-scroll-nav='0'>Home</a> 
     </li> 
     <li> 
     <a data-scroll-nav='1'>Projects</a> 
     </li> 
     <li> 
     <a data-scroll-nav='2'>LP</a> 
     </li> 
     <li> 
     <a data-scroll-nav='3'>Contact</a> 
     </li> 
    </ul> 
    </nav> 
</div> 

Вот мой CSS:

.nav-container { 
    background-color: rgba(0, 0, 0, 0); 
    width: 100%; 
    position: fixed; 

} 
nav { 
    text-align: center; 
    width: 50%; 
    margin: 0px auto; 
} 
nav ul { 
     padding: 0px; 
    } 
nav li { 
    width: 24%; 
    display: inline-block; 
} 

    nav li a { 
     font-size: 16px; 
     color: white; 
     font-family: Market; 
    } 
    nav li a.active { 
     color: black; 
     text-decoration: none; 
     font-size: 200%; 
    } 
    nav li a.hover{ 
    text-decoration: none; 
    color: #c8c8a9; 
    } 

HTML, находится в отдельном файл и включен в основном файле внутри начальной загрузки контейнера, как это:

<div class="container"> 
<?php 
include("header.php"); 
?> 

Answer 1

Вы можете попробовать:

• Во-первых, чтобы ваши вещи никогда не ломаются в строках:

  .nav-container nav ul { 
      white-space:nowrap; 
  } 
  

• Два установить min-width:

  .nav-container nav ul li { 
      min-width:55px; 
  } 
  

Редактировать

Через несколько комментариев также необходимо удалить неподвижная width от nav ul li