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

<!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}