HTML, CSSで作成した模写サイト PCでズームアウト表示すると左寄りになります

Question

コーディング初心者です。
Progateを一通り終え、Airbnbサイトの模写に挑戦しています。

まだ完成にほど遠いのですが、現在できあがっている部分に関して、
PC上でブラウザ表示をズームアウトした時に子要素が左寄りになってしまい、解決できずにいます。

発生している問題・エラーメッセージ

下↓がオリジナルサイトをPCで67％表示にした際のスクリーンショットです。

一方、自分が模写したコードを67％表示にすると、このように左寄りになります（自分の便宜上　左側要素の背景色を変えている点、右側要素の中身が完成していない点は無視していただければと思います）。

該当のソースコード

    <div class="top-container">
        <div class="msg-container">
            <p>予想ホスティング収入額をチェック</p>
            <h1><span class="city">Mumbai</span>でホスティングして、ひと月あたり最大<span class="amount">¥ 47,608</span>の収入を得ましょう</h1>
            <a href="#">予想ホスティング収入額の計算方法</a>
        </div>
        <div class="form-container">
            <p class="form-message"> 予想ホスティング収入額を更新するにはお部屋についてさらに詳しくお聞かせください</p>
            <input type="text" id="address-input" name="location" placeholder="所在地" role="combobox" value="">
              <div id="room-type-dropdown">まるまる貸切</div></label>
        </div>
    </div>

.top-container {
    background-color:#F2ECE2;
    height: 520px; 
    width: 100%;
    padding-left: 80px;
}

.msg-container {
    display: inline-block;
    background-color: lightskyblue;
    float: center;
    padding-top: 96px;
    padding-left: 5px;  
    width: 42%;
    min-width: 514px;
    max-width: 700px;
}

.msg-container p {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 40px;
    line-height: 22px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.msg-container h1 {
    font-family: Circular, -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    font-weight: 700;
    font-size: 42px;
    margin-bottom: 28px;
    letter-spacing: 0.01em;
}


.city {
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 44px;
}

.amount {
    color: #e41e57;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 38px; 
}

.msg-container a {
    color: black;
    font-size: 14px;
    cursor: pointer;
    font-weight: 600;
}


.form-container {
    display: inline-block;
    float: center;
    vertical-align: top;
    box-shadow: 0 0 20px rgb(206, 206, 206);
    width: 543px;
    height: 434px;
    background-color: #fff;
    border-radius: 15px;
    margin-top: 0;
    margin-left: 122px;
    margin-bottom: 95px;
}

.form-message {
    color: #222222;
    font-size: 18px;
    line-height: 24px;
    padding: 0px 8px 12px 8px;
    margin: 30px 30px 23px 30px;
}

#address-input {
    width: 480px;
    height: 57px;
    margin-left: 34px;
    margin-right: 32px;
    inset: 0px 0px -1px;
    border-radius: 8px 8px 0px 0px;
    border-color: rgb(176,176,176);
    border-width: 1px;
    z-index: 0;
}

#room-type-dropdown {
    width: 480px;
    height:57px;
    margin-bottom: 0;
    margin-left: 34px;
    margin-right: 32px;
    border-color: rgb(176,176,176);
    border-width: 1px;
}

試したこと

Flexbox, inline-blockをblockに変更するなど試みましたが、いずれも100％表示の際のレイアウトが大きく崩れてしまいます。

どなたか解決策をご存じでしたらアドバイスお願いいたします。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[Lhankor_Mhy]

3-7. markdownを利用しましょう
https://teratail.com/help/question-tips#questionTips3-7

[hatena19]

HTMLコードも提示してください。

[m.ts10806]

>コーディング初心者です。テラテイルで質問させていだくのも初めてで、内容に不備等ございましたら申し訳ありません。

この手の前提や挨拶はなくても良いと思います。
「初心者マーク」を質問につけられます。

先の２つの指摘とともに質問編集してご対応ください。

[m.ts10806]

あらゆるズーム表示で対応したいというのはかなり困難かと思います。
100％表示だけで調整されては？

[MsParrot]

ありがとうございます。そこまで気にしなくてもよかったのでしょうか。実際にウェブサイトを作る際、このような詳細にも修正依頼があるのかと思っていました。

Answer 1

HTMLファイルの内容が提示されていないので構造が(クラス名などから)想像するしかありませんが、全体を囲んでいるコンテナ系クラス名のスタイルにmargin: 0 auto;を追加してください。

Comments

[MsParrot]

ありがとうございます。早速試してみます。

[Daregada]

全体を囲むdiv要素がなければ、適宜追加してください。

[MsParrot]

お久しぶりです。margin: 0 auto;のみでは解決せずいろいろ調べており、要素がインラインブロックだったことが原因とわかりました。ブロック要素に変えるとスタイリングが崩れてしまったため、ブロック要素に変えた上でフレックスボックスを適用し、そこにmargin: 0 auto; を指定することで解決いたしました。どうもありがとうございました。