How can I align my logo image inside my header? - html

Question

I am trying to center my logo and search bar within my blue header. In my site I am using a section with a width of 1200px and inside the header there is also a "headersection" that is 1200px. I want the logo on the left side of this section and the searchbar in the middle. How can I accomplish this?
Live codepen: https://codepen.io/PHV/pen/dyvXGaa
My HTML:
<div class="usp-banner" role="complementary">
<ul class="uspBannerList">
<li class="uspBannerList">Vind de leukste en goedkoopste bordspellen op Spelplaats.com</li>
<li class="uspBannerList">Vergelijk prijzen bij verschillende aanbieders</li>
</ul>
</div>
<div class="header">
<div class="headersection">
<div class="logo">
<img src="img/Spelplaats-Logo-F.png" alt="Spelplaats.com" class="logo">
</div>
<script src="js/searchfunction.js"></script>
<div class="search">
<form action="search.html" method="get">
<label for="search" class="search"></label>
<input type="text" class="searchTerm" placeholder="Zoek spel" name="search">
</form>
<button type="submit" class="searchButton">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
</div>
<div class="topnav" id="myTopnav">
Strategie
Fantasy
Deductieve
Cooperatief
Familie
Kinder
Kaartspellen
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
My CSS:
html {
color: #ffffff;
font-size: 1em;
line-height: 1.4;
-webkit-font-smoothing: antialiased;
}
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,700,800);
/* No padding on the site*/
*,html,body,div,dl,dt,dd,ul,ol,li,h2,h3,h5,h6,pre,form,label,fieldset,input,blockquote,th,td {
margin: 0;
padding: 0;
}
article,aside,figure,footer,header,hgroup,nav,section {
display: block;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
/* Site background */
body {
background: #ffffff;
color: #374147;
font: 14px "Open Sans",Helvetica,Arial,sans-serif;
-webkit-font-smoothing: antialiased;
line-height: 1.4;
margin: auto;
}
h2{
font: 16px "Open Sans",Helvetica,Arial,sans-serif;
font-weight: bold;
margin-top: 3px;
margin-bottom: 5px;
}
h3 {
font: 14px "Open Sans",Helvetica,Arial,sans-serif;
font-weight: bold;
margin-top: 3px;
}
/* Add a black background color to the top navigation */
.topnav {
background-color: #eff7fa;
overflow: hidden;
text-align: center;
}
/* Style the links inside the navigation bar */
.topnav a {
display: inline-block;
color: #374147;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add an active class to highlight the current page */
.topnav a.active {
background-color: rgb(0, 51, 109);
color: white;
}
.topnav input[type=text] {
float: right;
padding: 6px;
margin-top: 8px;
margin-right: 16px;
border: none;
font-size: 17px;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
/* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
#media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */
#media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive a.icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
/* Styling of the section */
section{
max-width: 1200px;
min-height: 1000px;
margin-left: auto;
margin-right: auto;
}
.headersection{
max-width: 1200px;
max-height: 96px;
margin-left: auto;
margin-right: auto;
}
/* Styling of complementary banner */
.usp-banner {
display: block;
max-width: 900px;
margin-left: auto;
margin-right: auto;
padding: 3px;
font: 14px "Open Sans",Helvetica,Arial,sans-serif;
line-height: 1.5rem;
color: #374147;
background: #fff;
height: 30px;
}
#media screen and (max-width: 600px) {
.usp-banner{
display: none;
}
}
#media screen and (max-width: 768px) {
.usp-banner{
display: none;
}
}
.uspBannerList ul{
margin-left: 0;
padding-left: 0;
}
.uspBannerList li{
list-style-type: none;
margin-right: 2.5%;
margin-left: 2.5%;
width: 45%;
float: left;
height: auto;
}
/*Styling of searchbar */
.search {
width: 35%;
position: relative;
display: flex;
left: 12%;
margin: auto;
}
#media screen and (max-width: 600px) {
.search{
width: 50%;
}
}
#media screen and (max-width: 768px) {
.search{
width: 60%;
}
}
.searchTerm {
width: 300px;
border: 3px solid #fff;
border-right: none;
padding: 5px;
height: 36px;
border-radius: 5px 0 0 5px;
outline: none;
color: #374147;
}
#media screen and (max-width: 600px) {
.searchTerm{
width: 100px;
}
}
.searchTerm:focus{
color: #374147;
}
.searchButton {
width: 40px;
height: 36px;
border: 1px solid #fff;
background: #57bdfc;
text-align: center;
color: #fff;
border-radius: 0 5px 5px 0;
cursor: pointer;
font-size: 20px;
}
/*Styling of the header */
.header {
padding: 35px;
text-align: center;
background: #57bdfc;
color: white;
}
.logo {
height: 96px;
float: left;
position: relative;
}
#media screen and (max-width: 600px) {
.logo{
margin-left: 5px;
}
}
#media screen and (max-width: 768px) {
.logo{
margin-left: 5px;
}
}

Answer 1

Update these css
.headersection {
max-width: 1200px;
max-height: 96px;
margin-left: auto;
margin-right: auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.search {
display: flex;
}

Answer 2

if you want to have padding for the header and the height of .headersection be limit
you should set position absolute for .logo as below:
.logo { position: absolute; top: 0; bottom: 0; margin: auto}
and set position relative for .header.
but this is not good practice.
you can easily use this code for better result :
.header {
display: flex;
align-items: center;
}
remove .headersection because there is no need

Answer 3

this might be helpful
.logo {
height: 96px;
float: left;
position: relative;
margin-top: -15px; <--- adjust according to your need..
}