adding margin to navigation menu

rightnow, the menu items are formatted in style.css within a @media screen and (min-width: 600px) query:

.main-navigation li {
		margin: 0 40px 0 0;
		margin: 0 2.857142857rem 0 0;
		position: relative;
	}

i.e. the margin is applied to the right of the menu item;

change it so that the margin gets applied evenly to the left and right;
for example, add this to your style.css in your child theme:

@media screen and (min-width: 600px) {
	.main-navigation li {
		margin: 0 20px 0 20px;
		margin: 0 1.43rem 0 1.43rem;
	}
}

Thank you for the fast answer, it worked, but the problem is that the space is added as well in the sub menu. and i would like to change only the main nav.

make the style more specific for just the direct top menu items; for example:

@media screen and (min-width: 600px) {
	.main-navigation .nav-menu > ul > li {
		margin: 0 20px 0 20px;
		margin: 0 1.43rem 0 1.43rem;
	}
}

btw:
your child theme’s style.css is broken because of a missing closing bracket } after this style:

.main-navigation li ul li a:hover {
background: #A3A2A2;
color: #202020;

many thanks! seems to be well now.