CSSの水平方向のナビゲーションバー

Question

私は問題があり、それを解決する方法がわかりません。私は初心者です。私はナビゲーションバーを作ろうとしているし、ナビゲーションポイント間の間隔を減らすことができますが、私はそれほどうまくいきません。 my menu

と私はそれの間にスパイスを削減し、このような何かがしたい：ここ は、私が持っているものである

enter image description here

Answer 1

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 
li { 
 
    float: left; 
 
} 
 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
} 
 
li a:hover:not(.active) { 
 
    background-color: #111; 
 
} 
 
.active { 
 
    background-color: #4CAF50; 
 
}

<ul> 
 
    <li><a class="active" href="#home">Home</a> 
 
    </li> 
 
    <li><a href="#news">News</a> 
 
    </li> 
 
    <li><a href="#contact">Contact</a> 
 
    </li> 
 
    <li><a href="#about">About</a> 
 
    </li> 
 
</ul>

https://jsfiddle.net/nmttg009/