When aligning the logo using float the header goes wonky HTML

Question

So I'm extremely new to html and css and I want to create a website. But when I use float: left; to make my logo stay to the left, the header goes wonky.

https://jsfiddle.net/bm0dynw6/

 .logo { float: left; }

 <div class="header"> <img class="logo" src="PolyNOTEMBLEM.png" width="330" height="82.5" /> <button id="Home" class="tablink" onclick="window.location.href='[Redacted]'" > Discord invite </button> </div>

Answer 1

You can use

.header::after {
    display: block;
    clear: both;
    content: "";
}

or

.header {    
    display: flex;
    justify-content: space-between;
}

and remove the float:left from logo

Answer 2

USE THIS

.header {    
    display: flex;
    align-items:flex-start;
}