Header isn't centered but rest of the page is - html

Question

Been trying to figure out for a couple of days now why the logo in the header which you can see here: https://gyazo.com/5eb973585ce428f9d34bc7bd46aec14c isn't centered with the rest of the page like with the arrow below it in the picture.
#font-face {
font-family: 'cabinregular';
src: url('font1/cabin-regular-webfont.woff2') format('woff2'), url('font1/cabin-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'open_sansregular';
src: url(font2/opensans-regular-webfont.woff2) format("woff2"), url(font2/opensans-regular-webfont.woff) format("woff");
font-weight: 400;
font-style: normal;
}
#font-face {
font-family: 'edoregular';
src: url(font3/edo-webfont.woff2) format("woff2"), url(font3/edo-webfont.woff) format("woff");
font-weight: 400;
font-style: normal;
}
body {
margin: 0;
padding: 0;
}
.header {
background-color: white;
width: 100%;
height: 70px;
position: fixed;
z-index: 999;
-webkit-box-shadow: 0px -1px 16px -5px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px -1px 16px -5px rgba(0, 0, 0, 0.75);
box-shadow: 0px -1px 16px -5px rgba(0, 0, 0, 0.75);
}
.headeritems {
text-align: center;
}
.navigationleft {
vertical-align: top;
display: inline-block;
}
.navigationleft ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navigationleft li {
display: inline;
}
.navigationleft li a {
color: #BEBEBE;
display: inline-block;
padding: 24px 40px 0px 40px;
text-decoration: none;
font-family: cabinregular;
font-size: 16px;
transition: color .20s ease-in-out;
-moz-transition: color .20s ease-in-out;
-webkit-transition: color .20s ease-in-out;
}
.navigationleft li a:hover {
color: #00C4FF;
}
.logo {
display: inline-block;
padding: 10px 20px 0px 20px;
}
.navigationright {
vertical-align: top;
display: inline-block;
}
.navigationright ul {
list-style-type: none;
margin: 0;
padding: 0;
}
.navigationright li {
display: inline;
}
.navigationright li a {
color: #BEBEBE;
display: inline-block;
padding: 24px 40px 0px 40px;
text-decoration: none;
font-family: cabinregular;
font-size: 16px;
transition: color .20s ease-in-out;
-moz-transition: color .20s ease-in-out;
-webkit-transition: color .20s ease-in-out;
}
.navigationright li a:hover {
color: #00C4FF;
}
.container {
background-image: url(images/container.jpg);
background-repeat: no-repeat;
width: cover;
height: 650px;
}
.content {
margin: 0 auto;
width: 650px;
padding-top: 250px;
color: white;
font-family: edoregular;
font-size: 100px;
text-shadow: 3px 2px 1px rgba(0, 0, 0, 0.5);
}
.arrow1 {
margin: 0 auto;
width: 60px;
margin-top: 170px;
transition: padding-top .20s ease-in-out;
-moz-transition: padding-top .20s ease-in-out;
-webkit-transition: padding-top .20s ease-in-out;
}
.arrow1:hover {
padding-top: 20px;
}
.contentabout {
margin: 0 auto;
width: 650px;
height: 550px;
padding-top: 100px;
font-family: edoregular;
text-align: justify;
}
.contentabout h1 {
height: 50px;
color: #2D2D2D;
border-bottom: 1px solid #EEEEEE;
}
.contentabout p {
padding-top: 30px;
font-family: open_sansregular;
font-size: 15px;
}
.arrow2 {
margin: 0 auto;
width: 60px;
margin-top: 145px;
transition: padding-top .20s ease-in-out;
-moz-transition: padding-top .20s ease-in-out;
-webkit-transition: padding-top .20s ease-in-out;
}
.arrow2:hover {
padding-top: 20px;
}
.containerportfolio {
height: 720px;
background-image: url(images/containerportfolio.jpg);
}
.contentportfolio {
margin: 0 auto;
width: 709px;
padding-top: 70px;
font-family: edoregular;
color: white;
text-shadow: 3px 2px 1px rgba(0, 0, 0, 0.5);
}
.contentportfolio h1 {
height: 50px;
border-bottom: 1px solid white;
}
.portfolioitems {
height: 400px;
border-bottom: 1px solid white;
}
.portfolioitems p {
text-align: center;
font-family: open_sansregular;
font-size 30px;
color: white;
padding-top: 100px;
}
.byggfram {
width: 220px;
height: 124px;
opacity: 0.7;
display: inline-block;
margin-top: 5px;
-webkit-box-shadow: 0px 0px 56px -1px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 56px -1px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 56px -1px rgba(0, 0, 0, 0.75);
transition: opacity .20s ease-in-out;
-moz-transition: opacity .20s ease-in-out;
-webkit-transition: opacity .20s ease-in-out;
}
.byggfram:hover {
opacity: 1;
}
.classie {
width: 220px;
height: 124px;
opacity: 0.7;
display: inline-block;
margin-left: 20px;
-webkit-box-shadow: 0px 0px 56px -1px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 56px -1px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 56px -1px rgba(0, 0, 0, 0.75);
transition: opacity .20s ease-in-out;
-moz-transition: opacity .20s ease-in-out;
-webkit-transition: opacity .20s ease-in-out;
}
.classie:hover {
opacity: 1;
}
.anderssonsvensson {
width: 220px;
height: 124px;
opacity: 0.7;
display: inline-block;
margin-left: 20px;
-webkit-box-shadow: 0px 0px 56px -1px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0px 0px 56px -1px rgba(0, 0, 0, 0.75);
box-shadow: 0px 0px 56px -1px rgba(0, 0, 0, 0.75);
transition: opacity .20s ease-in-out;
-moz-transition: opacity .20s ease-in-out;
-webkit-transition: opacity .20s ease-in-out;
}
.anderssonsvensson:hover {
opacity: 1;
}
.arrow3 {
margin: 0 auto;
width: 60px;
margin-top: 85px;
transition: padding-top .20s ease-in-out;
-moz-transition: padding-top .20s ease-in-out;
-webkit-transition: padding-top .20s ease-in-out;
}
.arrow3:hover {
padding-top: 20px;
}
.containercontact {
height: 650px;
}
.contact {
margin: 0 auto;
width: 650px;
padding-top: 70px;
}
.titlecontact {
text-align: center;
}
.contact h1 {
font-family: edoregular;
color: #2D2D2D;
height: 50px;
}
<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width, initial-scale=1.0" name="viewport">
<link href="css/style.css" rel="stylesheet">
<link href="css/images/favicon.ico" rel="shortcut icon">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Loom | Home</title>
</head>
<body>
<a id="home" name="home"></a>
<a id="home" name="top"></a>
<div class="header">
<div class="headeritems">
<div class="navigationleft">
<ul>
<li>
Home
</li>
<li>
About
</li>
</ul>
</div>
<div class="logo">
<a href="#home">
<img src="css/images/loomlogo.svg">
</a>
</div>
<div class="navigationright">
<ul>
<li>
Portfolio
</li>
<li>
Contact
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="content">
Loom Is Lemon
<div class="arrow1">
<a href="#about" class="smoothScroll">
<img src="css/images/arrowdown.svg" style="width:60px">
</a>
</div>
</div>
</div>
<a id="about" name="about"></a>
<div class="containerabout">
<div class="contentabout">
<h1>Greetings from Sweden!</h1>
<p>Hello</p>
<div class="arrow2">
<a href="#portfolio" class="smoothScroll">
<img src="css/images/arrowdown2.svg" style="width:60px">
</a>
</div>
</div>
</div>
<a id="portfolio" name="portfolio"></a>
<div class="containerportfolio">
<div class="contentportfolio">
<h1>Portfolio</h1>
<div class="portfolioitems">
<div class="byggfram">
<img src="css/images/byggfram.png">
</div>
<div class="classie">
<img src="css/images/classie.png">
</div>
<div class="anderssonsvensson">
<img src="css/images/anderssonsvensson.png">
</div>
<p>More coming soon!</p>
</div>
<div class="arrow3">
<a href="#contact" class="smoothScroll">
<img src="css/images/arrowdown.svg" style="width:60px">
</a>
</div>
</div>
</div>
<div class="containercontact">
<div class="contact">
<div class="titlecontact">
<img src="css/images/loomlogo2.svg">
<h1>Contact Me!</h1>
</div>
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="javascript/smoothscroll.js"></script>
</body>

Answer 1

You could try putting:
<center></center>
around the part that isn't centered.