メディアクエリで要素全体が左に寄ってしまう

前提・実現したいこと

HTML・CSSを使って簡単なプロフィールサイトを制作しています。
メディアクエリを使用してレスポンシブ対応させたいです。

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

メディアクエリ適用時に、header以外の要素が左右中央揃えにならず左に寄ってしまいます。
containerクラスにmargin:0 auto;とtext-align:center;を指定し、フルスクリーンでは問題なく中央揃えになっています(詳細はコードを見て頂けるとありがたいです)。
画面に対して要素の横幅がが大きすぎて切れてしまっているわけではなく、適切に文字サイズ等は縮小しているが、箱が左に寄ってしまっているような状態だと思います。
自力では解決できないので教えていただきたいです。よろしくお願いします。

※ヘッダー内のロゴとナビゲーションメニューが横並びになっておらず不自然ですが、この質問とは関係ないように思うのでスルーで大丈夫です

HTML

<!DOCTYPE html>

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>KAKERU MIYAICHIの自転車紹介</title>
    <meta name="description" content="KAKERU MIYAICHIが自慢の自転車を紹介するサイト">
    <link rel="stylesheet" href="CSS/style.css">
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link rel="icon" type="image/ico" href="img/favicon.ico">
</head>

<body>
    <header>
        <div class="container">
            <h1　class="site-title"><a href="index.html"><img src="img/logo.svg" alt="Profile"></a></h1>
            <nav>
                <ul>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Bicycle</a></li>
                </ul>
            </nav>
        </div>
    </header>    

    <main>
        <div class="top">
            <img src="img/mainvisual.jpg" alt="ロードバイクの写真">
        </div>
        <div class="about">
            <div class="container">
                <h2>About</h2>
                <div class="profile">
                    <img src="img/about.jpg" alt="プロフィール写真">
                    <div class="profile-contents">
                        <h3>KAKERU MIYAICHI</h3>
                        <p>テキストテキストテキストテキストテキストテキストテキスト<br>
                        テキストテキストテキストテキストテキストテキストテキスト<br>
                        テキストテキストテキストテキストテキストテキストテキスト</p>
                    </div>
                </div>
            </div>
        </div>
        <div class="bicycle">
            <div class="container">
                <h2>Bicycle</h2>
                <div class="items">
                    <div class="item">
                        <img src="img/bicycle1.jpg" alt="ロードバイクの写真">
                        <div class="item-text">
                            <h3>タイトルタイトル</h3>
                            <p>テキストテキストテキスト</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/bicycle2.jpg" alt="ロードバイクの写真">
                        <div class="item-text">
                            <h3>タイトルタイトル</h3>
                            <p>テキストテキストテキスト</p>
                        </div>
                    </div>
                    <div class="item">
                        <img src="img/bicycle3.jpg" alt="ロードバイクの写真">
                        <div class="item-text">
                            <h3>タイトルタイトル</h3>
                            <p>テキストテキストテキスト</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <p><small>&copy; 2020 Profile</small></p>
    </footer>
</body>

</html>

CSS

@charset "UTF-8";

/* 共通部分
------------------------ */
*{
    box-sizing: border-box;
}

html{
    font-size: 100%;
}

body{
    color: #383E45;
}

a{
    text-decoration: none;
}


.container{
    max-width: 960px;
    padding: 0 4%;
    margin: 0 auto;
    text-align: center;
}

/* HEADER
-------------------------*/
header{
    height: 60px;
}

header .container {
    display: flex;
    justify-content: space-between;  
    align-items: center; 
}

header img{
    width: 120px;
}

header ul{
    display: flex;
}

header li{
    list-style: none;
    margin-left: 24px;
    font-size: 14.4px;
    line-height: 17px;
}

li a{
    color: #24292E;
}

/* MAIN
--------------------------- */

/*  TOP */

.top{
    margin-bottom: 89px;
}

.top img{ 
    height: 600px;
    width: 100%;
    object-fit: cover;
}

/* ABOUT */

.about{
    margin-bottom: 107px;
}

.about h2{
    font-size: 32px;
    border-bottom: 1px solid #383E45;
    display: inline-block;
    margin-bottom: 69px;
}

.profile{
    display: flex;
    justify-content: center;
}

.profile-contents{
    text-align: left;
}

.profile-contents h3{
    font-size: 16px;
    margin-top: 6px;
    margin-bottom: 15px;
}

.profile-contents p{
    font-size: 14.4px;
}

.profile img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin-right: 30px;
}

/* BICYCLE */

.bicycle{
    margin-bottom: 117px;
}

.bicycle h2{
    font-size: 32px;
    border-bottom: 1px solid #383E45;
    display: inline-block;
    margin-bottom: 60px;
}

.items{
    display: flex;
    justify-content: space-around;
}

.item img{
    height: 174px;
    margin-bottom: 13px;
}

.item h3{
    margin-bottom: 17px;
    font-size: 16px;
}

.item p{
    font-size: 14.4px;
}


/* FOOTER */

footer{
    text-align: center;
    padding-bottom: 12px;
    font-size: 0.625rem;
}

/* モバイル版
------------------------- */

@media (max-width: 600px){
    .top img{
        width: 100%;
    }

}

行動規範の内容に同意します

回答2件

ベストアンサー

css
1.item img {
2    height: 174px;
3    margin-bottom: 13px;
4}

と画像の幅が固定値になっているので、右にオーバーフローしているのが原因です。
手っ取り早い解決は、

css
1.item img {
2/*    height: 174px; */
3    margin-bottom: 13px;
4    width: 100%;
5}

などとして、親要素依存のサイズにしてしまうことですが、レイアウトの都合もあると思いますのでいろいろ試行錯誤してみてください。

投稿2021/10/02 01:39

Lhankor_Mhy

総合スコア36115

ss-ss

2021/10/02 13:21

回答ありがとうございます！確かに、上記の通り試してみたら中央寄せになりました！レイアウト上そのまま適用することはできないのでもっと色々試してみますが、中央寄せになってしまっている原因がそもそもわからなかったのでひとまず解決です。オーバーフローについての理解も浅いとわかったので併せて調べてみます。本当にありがとうございました！

行動規範の内容に同意します

具体的にどの部分ですか？
良いようにみえますけど

投稿2021/09/30 23:00

退会済みユーザー

総合スコア0

ss-ss

2021/09/30 23:11

回答ありがとうございます！具体の部分は、先程質問を編集してスクショを追加しましたのでそちらご覧いただけるとありがたいです。

退会済みユーザー

2021/09/30 23:16

display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; でやってみるか該当する項目をブラウザでinspectしてみて、原因を探る

ss-ss

2021/10/01 09:09

返信遅れてすみません！ありがとうございます。自宅に着いたらトライしてみます！

ss-ss

2021/10/01 12:08

display: -webkit-flex; display: flex; -webkit-justify-content: center; justify-content: center; を試してみましたが解決できませんでした。。検証ツールでもう少し色々原因を探ってみます！ありがとうございました。

行動規範の内容に同意します

あなたの回答