How to set equal distance between header elements? - html

Question

I'm using the justify-content:space-between to horizontally distribute all elements equally across my header. This works fine until I add padding-right:20px to my nav links. It shifts my header h2 element to the right, making it uneven. How do I keep the padding but have my elements equally aligned? Help appreciated, thank you.
https://jsfiddle.net/2fr3L8zh/14/
HTML
<header>
<div id="header-wrapper">
<nav>
<a>Projects</a>
<a>About</a>
<a>Contact</a>
</nav>
<h2>EMMANUEL OJIJI</h2>
<p>SOCIAL MEDIA HERE</p>
</div>
</header>
<section id="intro">
<div id="intro-wrapper">
<h1>I'm Lorem Ipsum — a Birmingham -based Visual Designer with a passion and
a firm belief in considered and meaningful design.</h1>
</div>
</section>
CSS
html {
margin: 0;
padding: 0;
height: 100%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
height: 100px;
background-color: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
align-items: center;
padding-left: 50px;
padding-right: 50px;
}
#header-wrapper {
width: 90%;
display: flex;
justify-content: space-between;
align-items: center;
}
nav a {
padding-right: 20px;
}
#intro {
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
}
#intro-wrapper {
display: flex;
text-align: center;
width: 50%;
}
#intro-wrapper h1 {
font-weight: 700;
font-family: 'Raleway', sans-serif;
font-size: 2.2em;
line-height: 60px;
color: #333;
}

Answer 1

Avoid the padding for the last element of the navigation:
nav a:not(:last-child)
html {
margin: 0;
padding: 0;
height: 100%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
header {
height: 100px;
background-color: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
display: flex;
justify-content: center;
;
align-items: center;
padding-left: 50px;
padding-right: 50px;
}
#header-wrapper {
width: 90%;
display: flex;
justify-content: space-between;
align-items: center;
}
nav a:not(:last-child) {
padding-right: 20px;
}
#intro {
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
}
#intro-wrapper {
display: flex;
text-align: center;
width: 50%;
}
#intro-wrapper h1 {
font-weight: 700;
font-family: 'Raleway', sans-serif;
font-size: 2.2em;
line-height: 60px;
color: #333;
}
<header>
<div id="header-wrapper">
<nav>
<a>Projects</a>
<a>About</a>
<a>Contact</a>
</nav>
<h2>EMMANUEL OJIJI</h2>
<p>SOCIAL MEDIA HERE</p>
</div>
</header>
<section id="intro">
<div id="intro-wrapper">
<h1>I'm Lorem Ipsum — a Birmingham -based Visual Designer with a passion and a firm belief in considered and meaningful design.</h1>
</div>
</section>