画面の右にスクロール部分をなくし、ぴったしにしたい。

<!doctype html>
<head><link rel="stylesheet" type="text/css" href="a.css"></head>
<body>
<div class="wrapper">
    <header>
         <div class="left">
            <img src="logo-1.png">
        </div>
        <div class="right">
            <ul class="oya">
                <li>Skill</li>
                <li>About</li>
                <li>Contact</li>
        </div>
    </header>
    <img src="cat-1.png">
    <main>
        <div class="cat">
            <p class="chuo">Skill</p>
            <div class="catp">
                <div class="catt">
                    <img src="cat-2.png">
                </div>
                <div class="catt">
                    <p>We sleep whenever we want.We sleep wherever we</p>
                    <p>Want.All places can be our beds.</p>
                    <p>We sleep whenever we want.We sleep wherever we</p>
                    <p>Want.All places can be our beds.</p>
                    <p>We sleep whenever we want.We sleep wherever we</p>
                    <p>Want.All places can be our beds.</p>
                </div>
                <div class="catt">
                    <p>We sleep whenever we want.We sleep wherever we</p>
                    <p>Want.All places can be our beds.</p>
                    <p>We sleep whenever we want.We sleep wherever we</p>
                    <p>Want.All places can be our beds.</p>
                    <p>We sleep whenever we want.We sleep wherever we</p>
                    <p>Want.All places can be our beds.</p>
                </div>
                <div class="catt">
                    <img src="cat-3.png">
                </div>
                </div>
                </div>
                <div class="cas">
                    <p class="about">About</p>
                        <div class="two">
                        <div class="leftt">
                            <img src="cat-4.png">
                            <p>We are cute.There is no doubt about this.</p>
                                <p>Nobody can’t object to this fact.</p>
                        </div>
                        <div class="leftt">
                            <img src="cat-5.png">
                            <p>We are cute.There is no doubt about this.</p>
                                <p>Nobody can’t object to this fact.</p>
                        </div>
                    </div>
                    <p class="more"><img src="more3.png"></p>
                </div>
    </main>
    <footer>
        <p>Muchkin</p>
    </footer>
    </div>
    </body>
    </html>

.wrapper {
    max-width:100%;
} 

header {
    display:flex;
}

.left {
    flex:1;
}

.left img {
    width:180px;
    height:100px;
    margin-top:14px;
    margin-left:50px;
}

.right {
    flex:2;
    margin-left:330px;
    margin-top:30px;
}

.oya {
    display:flex;
}

.right li {
    list-style:none;
    margin-left:40px;
    font-size:26px;
    font-weight:bold;
    color:#5F2201;
}

.cat {
    padding-top:48px;
    padding-bottom:50px;
}

.chuo {
    font-size:26px;
    font-weight:bold;
    color:#5F2201;
    text-align:center;
    margin-bottom:100px;
}

.catp {
    display:flex;
    flex-wrap:wrap;
}

.catt {
   flex:300px;
    margin-left:180px;
    margin-bottom:50px;
}

.cas {
    background-color:#FFF3DD;
    padding-bottom:60px;
    padding-top:50px;
}

.about {
    font-size:26px;
    color:#5F2201;
    font-weight:bold;
    text-align:center;
    margin-top:100px;
    margin-bottom:50px;
}

.two {
    display:flex;
    justify-content: space-around; /* 追加 */
    }


    .more {
        text-align:center;
    }

    footer {
        background-color:#B9B9B9;
        height:40px;
        margin-top:-15px;
    }

    footer p {
        color:white;
        text-align:center;
        vertical-align:center;
    }```
```
.wrapper {
    max-width:100%;
} を行っても、右にスクロールでき、画面ぴったしになりません。どうすれば、よろしいでしょうか。

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

回答1件

ベストアンサー

無意味に大きいマージンを削除して、justify-content: space-between;で両端揃えにすればある程度の画面幅までは横スクロールはでません。
画像幅とメニューリストの幅の合計以下になれば横スクロールが出ますが、これはメディアクエリなどでサイズを変更するかレイアウトを変更するなどでレスポンシブ対応させることになるでしょう。

css
1header {
2  display:flex;
3  justify-content: space-between; /* 追加 */
4}
5
6.right {
7/*  flex:2;
8  margin-left:330px;*/
9  margin-left: auto;
10  margin-top:30px;
11}

投稿2021/02/14 03:10

hatena19

総合スコア34073

rasta

2021/02/14 03:58

すいません。やはり、横スクロールが出たままです。

hatena19

2021/02/14 04:17

そうですか。私のサンプルでは画面幅660px以上あれば、横スクロールでません。 https://codepen.io/hatena19/pen/KKNaxJz 症状の再現できるサンプルを提示してください。

rasta

2021/02/14 06:06

全部包括するクラスは、wrapperなのに、headerに display:flex;　justify-content: space-between; を指定するのでしょうか。

hatena19

2021/02/14 06:42

FlexBoxは、Flexコンテナ（親要素）とFlexアイテム（コンテナの子要素）という関係があり、コンテナにflexを設定するとアイテム（子要素）を整列されます。 leftクラス、rightクラスを横並べさせたいなら、その親要素であるheaderに設定します。

rasta

2021/02/15 04:05

leftクラス、rightクラスでなくて、ページ全体を指定するには、どうしたら、良いでしょうか。

hatena19

2021/02/15 04:37

何をページ全体に設定するのですか？

rasta

2021/02/16 08:57

max-widthです。

hatena19

2021/02/16 10:52

.wrapper に設定したらどうですか。あとは、あなたがどうしたいか次第です。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

画面の右にスクロール部分をなくし、ぴったしにしたい。

関連した質問