Add spaces between words in menu

Hi everyone !

i am trying to add spaces in between the different components of my menu (i think they look to close to each other)…i am new to wordpress and haven’t found the solution so far. Any idea ?

Here is the link of my website : https://www.leblocnotes.com

the code of my menu

/* Menu */

.menu-header {
background: #ffffff;
background: url(“li.menu-header {
background: #ffffff;
background: url(“library/media/images/trans.png”) 0px -7px repeat-x, -moz-linear-gradient(center top , #FFFFFF 20%, #eeeeee 100%);
background: url(“library/media/images/trans.png”) 0px -7px repeat-x, -webkit-gradient(linear,left top,left bottom,color-stop(.2, #FFFFFF),color-stop(1, #FFFFFF)) !important;
background: url(“library/media/images/trans.png”) 0px -7px repeat-x, -o-linear-gradient(top, #FFFFFF,#eeeeee) !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#FFFFFF, endColorstr=’#eeeeee’);
border-color: #999999;
border-style: solid;
border-width: 2px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1);
-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1);
color: #777;
font-size: 20px;
line-height:18px;
text-shadow: none;
float:left;width:100%;
}
.menu-back {clear:both;background-repeat:repeat-y;box-shadow:0 1px 1px rgba(0,0,0,.05);}

.menu-container {background:#ffffff;}

ul.nav-menu {line-height:1; width: 100%; margin-bottom:0; }
ul.nav-menu, ul.nav-menu * { list-style: none; margin-left:10px; }
ul.nav-menu li { float: left;position: relative;display: block;}
ul.nav-menu li:first-child {border-left:none;}
ul.nav-menu li:last-child {border-right:none;}
ul.nav-menu ul li { width: 100%; }
brary/media/images/trans.png”) 0px -7px repeat-x, -moz-linear-gradient(center top , #FFFFFF 20%, #eeeeee 100%);
background: url(“library/media/images/trans.png”) 0px -7px repeat-x, -webkit-gradient(linear,left top,left bottom,color-stop(.2, #FFFFFF),color-stop(1, #FFFFFF)) !important;
background: url(“library/media/images/trans.png”) 0px -7px repeat-x, -o-linear-gradient(top, #FFFFFF,#eeeeee) !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#FFFFFF, endColorstr=’#eeeeee’);
border-color: #999999;
border-style: solid;
border-width: 2px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1);
-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 0 2px rgba(255, 255, 255, 0.3) inset, 0 0 10px rgba(0, 0, 0, 0.1) inset, 0 1px 2px rgba(0, 0, 0, 0.1);
color: #777;
font-size: 20px;
line-height:18px;
text-shadow: none;
float:left;width:100%;
}
.menu-back {clear:both;background-repeat:repeat-y;box-shadow:0 1px 1px rgba(0,0,0,.05);}

.menu-container {background:#ffffff;}

ul.nav-menu {line-height:1; width: 100%; margin-bottom:0; }
ul.nav-menu, ul.nav-menu * { list-style: none; margin-left:10px; }
ul.nav-menu li { float: left;position: relative;display: block;}
ul.nav-menu li:first-child {border-left:none;}
ul.nav-menu li:last-child {border-right:none;}
ul.nav-menu ul li { width: 100%; }

And here is a link of a website which menu looks like what i would like to have :

https://www.mylittleparis.com