Airbnbの模写について HTML CSS

Question

前提

Airbnbの模写をしています。Airbnb
ヘッダーの部分についてですが、margin,padding等を設定していないのにも関わらず
画像のオレンジ色部分のように、余白ができてしまいます。
原因を教えていただけると幸いです。

実現したいこと

Airbnbのように、marginを左右に設定したい。

該当のソースコード

<div class="header">
        <div class="header-left">
            <div class="header-icon"></div>
            <div class="header-message">ホスティングへの扉を開きましょう</div>
            <button>ホスティングをはじめる</button>
        </div>
        <div class="header-right">動画</div>
    </div>

* {
    margin:0;
    padding:0;
    font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
}

.header {
    height: 450px;
}


.header-left {
    float: left;
    background-color: grey;
    width: 50%;
    height: 450px;
    text-align: center;
}

.header-message {
    height: 140px;
    width: 501px;
    font-size: 64px  !important;
    font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, sans-serif;
    letter-spacing: -0.02em !important;
    line-height: 70px !important;
}

.header-right {
    float: right;
    background-color: blue;
    width: 50%;
    height: 450px;
}

試したこと

header-messageにmargin:0px 72px;を入れてみましたが、空白が均等になりませんでした。

Answer 1

.header-message に margin: 0 auto;を設定すれば左右に均等に余白がつき、header-messageが中央に表示されます。

ただし、現状、float: left; float: right;で左右に並べてますが、この手法は10年以上前の古い手法です。
現在は、FlexboxかGridでレイアウトするのが主流です。

Airbnbのレイアウトを見ると、左右中央配置だけでなく、上下位置も中央配置してます。float のレイアウトでこれを実現するのは困難です。Airbnbも検証ツールでみるとFlexboxを使ってます。

ご参考までに、
↓Flexboxを使った模写サンプル
Codepen

Answer 2

検証ツールで見た感じ、.header-leftのwidthと.header-messageのwidthが影響しているように思います。