justify-content: space-between;で余白を均等にしたいです。

Question

前提・実現したいこと

justify-content: space-between;で余白を均等にしたいです。
flexboxで6つのボックスを作り、親要素（works-parent）にdisplay:flex;　flex-wrap:wrap;　justify-content: space-between;　を指定したところ、上段のみ左右に余白が入ってしまいました。いろいろ試しているのですが上手くいかず困っています。

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

画像のように上段のみ左右に余白が入ってしまい、下段とずれてしまっています。
PCファーストで作成しており、SPのほうでは特に問題は出ていません。

該当のソースコード

<section class="works">
    <h2 id="works"><ruby>WORKS<rt>作成したもの</rt></ruby></h2>
    <div class="works-parent">
        <a href="works-01.html">
            <div class="works-box">
                <div class="img-box">
                    <img src="./images/lp-pc.png" alt="lp">
                </div>
                <div class="works-text">
                    <h3>フェアトレード株式会社<br>メールマガジン LP</h3>
                    <p>ご依頼を頂き、WordPressのテンプレートcolorfulを使用し作成しました。</p>
                    <p>既存のLPとABテストを実施中のため、デザインの変更や検討の面で今後も携わらせていただく予定です。</p>
                    <div class="more-btn">
                        <a href="works-01.html">View more<i class="fas fa-chevron-right"></i></a>
                    </div>
                </div>
            </div>
        </a>
        <a href="works-02.html">
            <div class="works-box">
                <div class="img-box">
                    <img src="./images/pop-pc.png" alt="pop">
                </div>
                <div class="works-text">
                    <h3>THREE by KEEP様<br>店頭ポップ</h3>
                    <p>店舗に貼り出すポップ作成の依頼を受け、作成したものです。</p>
                    <p>それぞれ別のデザインで2パターン作成し、検討して頂きました。最終的にどちらも掲示して頂いています。</p>
                    <div class="more-btn">
                        <a href="works-02.html">View more<i class="fas fa-chevron-right"></i></a>
                    </div>
                </div>
            </div>
        </a>
        <a href="works-03.html">
            <div class="works-box">
                <div class="img-box">
                    <img src="./images/hairsalon-haru-pc.png" alt="Hair Salon Haru">
                </div>
                <div class="works-text">
                    <h3>架空サイト<br>Hair Salon HARU</h3>
                    <p>オンラインスクールの卒業制作で作成した架空の美容室HPです。</p>
                    <p>写真を多く取り入れ、店の雰囲気やイメージが伝わるように意識しました。全４ページです。</p>
                    <div class="more-btn">
                        <a href="works-03.html">View more<i class="fas fa-chevron-right"></i></a>
                    </div>
                </div>
            </div>
        </a>
        <a href="works-04.html">
            <div class="works-box">
                <div class="img-box">
                    <img src="./images/armoire-pc.png" alt="armoire">
                </div>
                <div class="works-text">
                    <h3>架空サイト<br>ARMOIRE</h3>
                    <p>架空のネイルチップサロンHPです。</p>
                    <p>若い女性のペルソナを設定し、カラーやタイポグラフィにこだわりました。全体的にキュートなデザインに仕上げています。全１ページです。</p>
                    <div class="more-btn">
                        <a href="works-04.html">View more<i class="fas fa-chevron-right"></i></a>
                    </div>
                </div>
            </div>
        </a>
        <a href="works-05.html">
            <div class="works-box">
                <div class="img-box">
                    <img src="./images/protein-pc.png" alt="Blessings Protein">
                </div>
                <div class="works-text">
                    <h3>架空LP<br>Blessings Protein</h3>
                    <p>架空の女性向けプロテインのランディングページです。</p>
                    <p>ベネフィットを明確に伝える事を意識しました。主張はしつつ、シンプルに仕上げました。</p>
                    <div class="more-btn">
                        <a href="works-05.html">View more<i class="fas fa-chevron-right"></i></a>
                    </div>
                </div>
            </div>
        </a>
        <a href="works-06.html">
            <div class="works-box">
                <div class="img-box">
                    <img src="./images/iki-pc.png" alt="sampleshop">
                </div>
                <div class="works-text">
                    <h3>架空サイト<br>懐石料理 粋</h3>
                    <p>架空の懐石料理屋のHPです。</p>
                    <p>和の趣と高級感を出しつつ、「小さなお子様連れでも利用できる」というイメージを与えられるようにデザインしました。全4ページです。</p>
                    <div class="more-btn">
                        <a href="works-06.html">View more<i class="fas fa-chevron-right"></i></a>
                    </div>
                </div>
            </div>
        </a>
    </div>

.works-parent{
    display:flex;
    flex-wrap:wrap;
    justify-content: space-between;
    a{
        text-decoration:none;
        color:$black;
    }
    @media (max-width: 768px) {
        flex-direction:column;
        width: 32rem;
        margin:0 auto;
        a{
            text-decoration:none;
            color:$black;
        }
    } 
}

.works-box{
    width:32%;
    height: 54rem;
    box-shadow:0px 0px 4px rgb(0 0 0 / 25%);
    margin-bottom: 4rem;
    h3{
        font-family:'Noto Sans JP', sans-serif;
        font-weight: 300;
        font-size: 2.4rem;
        margin:2rem 0 4rem 0;
    }
    p{
        margin: 1rem 4rem;
    }
    @media (max-width: 768px) {
        width:100%;
        height: 45rem;
        margin-bottom:2rem;
        h3{
            font-size:1.8rem;
            margin: 2rem 0;
        }
        p{
            margin:1rem 2rem;
        }
    }
}

.works-box:hover{
    background-color:$gray;
    @media (max-width: 768px) {
        background-color:$white;
    }
}

.img-box{
    position: relative;
    img{
        width:100%;
        height:100%;
    }
}

試したこと

子要素自体に不要なmarginやpaddingがついていないか確認
HTMLとCSSのエラーチェック

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

HTML5　CSS3　cloud9

Answer 1

.works-parentの子要素はa要素なので、.works-boxではなくa要素にwidthを指定する必要があります。
a要素のなかにa要素があるのもおかしな話なので、まずどちらをリンクにするか決めましょう。
カード全体をリンクにするならボタンリンクは削除してa要素をflex-itemにします。
ボタンをリンクにするならカードを囲むa要素を削除すれば正常に動作するかと思います。

Comments

[koi0319]

無事解決しました。聞ける人がおらず困っていたので、非常に助かりました。ご回答ありがとうございました！