How to center image to the left of my header? - html

Question

I am making an HTML website for a school project and I want to center an image to the left of the header. By header, I mean the big thing that says World vector control. I put the image to float left but it just stays put in the top left corner for some reason.
body {
background-color: #252525;
margin: 0;
font-family: ultra;
}
.navbar {
overflow: hidden;
background-color: #333;
font-family: ultra;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.dropdown:hover .dropbtn {
background-color: #2E86C1;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #2E86C1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.navbar .search-container {
float: right;
}
.navbar input[type=text] {
padding: 6px;
margin-top: 8px;
font-size: 17px;
border: none;
}
.navbar .search-container button {
float: right;
padding: 6px 10px;
margin-top: 8px;
margin-right: 16px;
background: ;
font-size: 17px;
border: none;
cursor: pointer;
}
.navbar .search-container button:hover {
background: #ccc;
}
#media screen and (max-width: 600px) {
.navbar .search-container {
float: none;
}
.navbar a,
.navbar input[type=text],
.navbar .search-container button {
float: none;
display: block;
text-align: left;
width: 100%;
margin: 0;
padding: 14px;
}
.navbar input[type=text] {
border: 1px solid #ccc;
}
}
.header {
background-color: #252525;
padding: 10px;
text-align: center;
color: blue;
margin 0;
}
h1 {
color: #2E86C1;
font-size: 60px;
font-family: ultra;
}
img {
float: left;
}
#rcorners1 {
margin: 50px auto;
padding-top: 100px;
border-radius: 25px;
background: #fffafa;
padding: 20px;
width: 90%;
height: ;
}
<div class="header">
<img src="Untitled-2.png" alt="M" width="80" height="80">
<h1>World Vector Control</h1>
</div>
<div class="navbar">
Home
About
<div class="dropdown">
<button class="dropbtn">
Introduction
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
The Problem
The Solution
</div>
</div>
FAQ
<div class="dropdown">
<button class="dropbtn">
Contact Us
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
Donate
Get Invovled
</div>
</div>
<div class="search-container">
<form action="/action_page.php">
<input type="text" placeholder="Search..." name="search">
<button type="submit">
<i class="fa fa-search"></i>
</button>
</form>
</div>
</div>
<p id="rcorners1">Rounded corners!</p>

Answer 1

Try this one:
<img src="Untitled-2.png" alt="M" width="80" height="80" style="left:30px;">

Answer 2

Seeing that there's some margins and padding on the div.header and on the <h1>, an easy solution would be to make the <img> a child of the <h1>, then it'll be aligned exactly as the <h1>.
Removed unnecessary code for the sake of this explanation.
* {
margin: 0;
padding:0;
box-sizing:border-box;
}
.header {
border:1px solid black;
padding: 10px;
text-align: center;
color: blue;
margin 0; }
h1 {
border:1px solid black;
color: #2E86C1;
font-size: 60px;
font-family: ultra;
position: relative;
}
h1>img {
border:1px solid red;
position: absolute;
left: 15px;
height:100%;
width:80px;
}
<div class="header">
<h1><img >World Vector Control</h1>
</div>