Let the navbar appear without spaces in between - html

Question

Can someone explain me how i need to set the css statements to get the navbar one after another, without any free spaces?
Also it would be handy to know, how i can set the navbar over the whole display, that its automaticly working on different screen resolutions.
I tried finding a solution on w3schools.
<div class="navbar">
<ul>
<li>Compacts</li>
<li>Coupes</li>
<li>Sedans</li>
<li>Sports</li>
<li>Sports Classics</li>
<li>Super</li>
<li>Muscle</li>
<li>Off-Road</li>
<li>SUVs</li>
<li>Vans</li>
<li>Industrial</li>
<li>Commercial</li>
<li>Utility</li>
<li>Motorcycles</li>
</ul>
</div>
/* css */
.navbar ul {
list-style-type: none;
padding: 0px;
margin: 0px;
}
.navbar li {
display: inline;
}
.navbar a {
border: none;
padding: 2px;
margin: 0px;
background-color: #000000;
color: #ffffff;
text-decoration: none;
}
.button:active {
background-color: #f0a041;
color: #ffff00;
}
.button:hover {
background-color: #f0a041;
color: #ffff00;
}
tr, th {
border: none;
text-align: right;
}

Answer 1

Add the negative margin and your problem will get solved .
Here is the snippet .
just change the css property of the following class .
.navbar li {
display: inline;
margin-right: -0.26rem;
}
This will definitely solve your problem .

Answer 2

Just add float: left to li.
.navbar li {
display: inline;
float: left;
}

Answer 3

Give ul a display: flex, and the a tags a white-space pre:
/* css */
.navbar ul {
list-style-type: none;
padding: 0px;
margin: 0px;
display: flex;
}
.navbar a {
padding: 2px 5px;
background-color: #000000;
color: #ffffff;
text-decoration: none;
white-space:pre;
}
.button:active,
.button:hover {
background-color: #f0a041;
color: #ffff00;
}
<div class="navbar">
<ul>
<li>Compacts</li>
<li>Coupes</li>
<li>Sedans</li>
<li>Sports</li>
<li>Sports Classics</li>
<li>Super</li>
<li>Muscle</li>
<li>Off-Road</li>
<li>SUVs</li>
<li>Vans</li>
<li>Industrial</li>
<li>Commercial</li>
<li>Utility</li>
<li>Motorcycles</li>
</ul>
</div>