画像４つの左のマージンを開ける

<!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;
justify-content: space-between;
}

.left {
    flex:1;
}

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

.right {
    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;
  gap: 50px 180px
}

.catt {
    flex:1 0 calc(50% - 130px);
    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:-17px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    footer p {
        color:white;
    }

skillという文字の下のcattクラスが左のマージンがなく詰めた状態です。
left-marginを設定すると縦並びになってしまいます。
flex-boxで、うまく配置するには、どうしたら良いでしょうか。

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

回答1件

ベストアンサー

左にとったマージン分flexの値を調整すればいいのでは？

css
1.catt {
2    flex:1 0 calc(50% - 180px);
3    margin-left:50px;
4}   margin-bottom:50px;

投稿2021/02/16 09:01

yambejp

総合スコア116694

rasta

2021/02/16 09:23

flex:1 0 calc(50% - 180px); は、どういった意味でしょうか？

yambejp

2021/02/16 09:26

それを書いたのは質問者さんですよね？私は左マージンを50pxとり、当初130引いてたのに更に50加えた180pxをひいただけです

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.36%

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

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

質問する

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

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

画像４つの左のマージンを開ける

関連した質問