Background menu horizontal

Bonjour à tous
Je m'arrache actuellement les cheveux avec le CSS .
Je souhaiterai que le background de mon menu soit sans espaces blancs . ( Comme sur ma photo de maquette )
Or" creative"et "corporate" il n'ya aucuns soucis mais pour les deux autres menus il y'a un espace blanc . Je ne comprend pas ce que je dois changer . Quand je met une largeur le menu ne se place plus du tout comme je veux . Est il possible d'avoir un petit coup de pouce ? Je suis une vraie noob en ce qui concerne le CSS mais j'essaie au mieux .
Merci par avance
Voici mes codes
ainsi que ma maquette

<ul id="navigation">
				
					<li><a href="#"> All works </a></li>
					<li><a href="#">Creative</a> </li>
					<li><a href="#">Corporate </a></li>
					<li><a href="#">Portfolio </a></li>

				</ul>

#navigation li
{
	display: inline;
	background-color: red;
	
	
	

}

#navigation
{
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: center;
	


}

#navigation a
{
	text-decoration: none;
	color:#6f7a81;
	display:inline-block;
	margin: 0 20px;
	

} 

Modifié par Tinkerbell06 (15 Feb 2019 - 12:52)

Bonjour en mettant un simple espace entre les fermetures de balises </a> et </li> il n'y a plus d'espace, je ne sais pas si c'est bien ça que tu recherche :

<ul id="navigation">
				
					<li><a href="#"> All works </a> </li>
					<li><a href="#">Creative</a> </li>
					<li><a href="#">Corporate </a> </li>
					<li><a href="#">Portfolio </a> </li>

				</ul>

Hello

Je me permets d'intervenir parce que je ne comprends pas en quoi la solution en es une.
Il ne devrait pas avoir d'espace blanc dans ton HTML. Le HTML est un langage de balisage. Si vraiment on veux insérer un espace on peut utiliser une balise telle que <nbsp/>. En fait, les chevrons ouvrants et fermants on été remplacés par des entités HTML. Je ne comprends pas pourquoi. La solution est dans le CSS principalement. Le HTML est le contenu et le CSS est le style donc lorsque le rendu n'est pas celui attendu il faut commencer par inspecter le CSS (tant que le HTML est valide bien évidemment).

Je te propose 2 solutions:

La première consiste à ajouter des faux-commentaires après les <li> qui sont en display: inline-block. Ce n'est pas la meilleure solution. Mais lorsqu'on utilise des blocs en "inline-block" il y a toujours un espace blanc entre eux.

https://jsfiddle.net/g0pL6r31/1/

Un meilleure solution est d'utiliser le flexbox. Plus simple et plus moderne.

https://jsfiddle.net/1d0f9pwo/2/

Pour la suite de ton intégration, je te conseille d'utiliser un reset comme celui-ci pour partir sur base propre et plutôt égale entre navigateurs:

https://meyerweb.com/eric/tools/css/reset/

Et d'utiliser des classes et jamais d' IDs pour le CSS.

De très bons conseils pour structurer son CSS ici:

https://cssguidelin.es/

En espérant que ça aura été utile