當使用浮動對齊徽標時，header 變得不穩定 HTML

Question

所以我對 html 和 css 非常陌生，我想創建一個網站。 但是當我使用 float: left; 為了讓我的標志保持在左邊，header 變得不穩定。

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

您可以使用

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

或者

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

並從徽標中刪除float:left

Answer 2

用這個

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