Text won't center in header - html

Question

I've been trying to get the "Header" text to be centered and the icon to stay.
text-align: center; won't work for me.
Anyone can lead me in the right direction?
Thanks.
IMG:
.header {
padding-top: 15px;
padding-bottom: 15px;
color: #fff;
background: #333;
}
.header a {
text-align: center;
text-decoration: none;
color: #fff;
font-size: 32px;
vertical-align: middle;
}
#hamburger {
color: white;
font-size: 32px;
}
.menu {
display: inline-block;
}
<div class="headerwrapper">
<div class="header">
<div class="menuWrap">
<div class="menu open">
<span id="hamburger" class="fas fa-bars hvr-grow"></span>
</div>
Header
</div>
</div>
</div>

Answer 1

You should put text-align:center into your .header class.
In addition to that you also should put float:left; property in the .menu class.
Here is the example:
.header {
padding-top: 15px;
padding-bottom: 15px;
color: #fff;
background: #333;
text-align:center;
}
.header a {
text-align: center;
text-decoration: none;
color: #fff;
font-size: 32px;
vertical-align: middle;
}
#hamburger {
color: white;
font-size: 32px;
}
.menu {
display: inline-block;
float:left;
}
<div class="headerwrapper">
<div class="header">
<div class="menuWrap">
<div class="menu open">
<span id="hamburger" class="fas fa-bars hvr-grow">a</span>
</div>
Header
</div>
</div>
</div>

Answer 2

The centering can be done with text-align: center; on .header.
However, this will also affect your hamburger icon (which I replaced with an "X" below to make it visible), so apply position: absolute to its container .menu and use the left parameter to define the distance from the left border:
.header {
padding-top: 15px;
padding-bottom: 15px;
color: #fff;
background: #333;
text-align: center;
}
.header a {
text-align: center;
text-decoration: none;
color: #fff;
font-size: 32px;
}
#hamburger {
color: white;
font-size: 32px;
}
.menu {
position: absolute;
left: 30px;
}
<div class="headerwrapper">
<div class="header">
<div class="menuWrap">
<div class="menu open">
<span id="hamburger" class="fas fa-bars hvr-grow">X</span>
</div>
Header
</div>
</div>
</div>

Answer 3

.header {
padding-top: 15px;
padding-bottom: 15px;
color: #fff;
background: #333;
text-align: center;
}
.header a {
text-align: center;
text-decoration: none;
color: #fff;
font-size: 32px;
vertical-align: middle;
}
#hamburger {
color: white;
font-size: 32px;
}
.menu {
display: inline-block;
vertical-align: middle;
float: left;
padding: 0 0 0 15px;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<div class="headerwrapper">
<div class="header">
<div class="menuWrap">
<div class="menu open">
<span id="hamburger" class="fas fa-bars hvr-grow"></span>
</div>
Header
</div>
</div>
</div>

Answer 4

You need to add text-align to your header class .header, it should look similar to this
.header {
padding-top: 15px;
padding-bottom: 15px;
color: #fff;
background: #333;
text-align: center;
}

Answer 5

Change Like This:
.header a {
position: absolute;
left: 50%;
transform: translate(-50%);
//Other css...
}
.header {
padding-top: 15px;
padding-bottom: 15px;
color: #fff;
background: #333;
}
.header a {
text-align: center;
text-decoration: none;
color: #fff;
font-size: 32px;
vertical-align: middle;
position: absolute;
left: 50%;
transform: translate(-50%);
}
#hamburger {
color: white;
font-size: 32px;
}
.menu {
display: inline-block;
}
<div class="headerwrapper">
<div class="header">
<div class="menuWrap">
<div class="menu open">
<span id="hamburger" class="fas fa-bars hvr-grow">Icon</span>
</div>
Header
</div>
</div>
</div>