ボックスサイズを3等分にしたい

【大前提】
・Web制作
・PC表示／レスポンシブ表示対応のホームページ制作中
・PC表示について聞きたい

【実現したいこと】　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
・PC表示においてボックスを3等分にしたい（幅・高さ均等）　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
・ボックスの「タイトル」の高さを揃える。

【したこと】
★［Boxサイズ3等分指定］

width : calc(100% / 3)

したが、うまく3等分されなかった。


【HTML】
<!-- メイン -->
    <main>
        <h1 class="main-text">船でしか行けない幻の波照間島の魅力</h1>
        <div class="main-container">
            <div class="box">
                <div class="box-title">日本最南端の島</div>
                <p>波照間島は八重山諸島に位置する人口約500人の島で人が住む島としては日本最南端にあたります。その名前は「果てのウルマ（珊瑚礁）の島」を語源としています。 赤瓦の伝統的な琉球家屋とサンゴの石垣、フクギの並木、そしてサトウキビ畑。島内は静かでのどかな風景が続きます。
                </p>
            </div>
            <div class="box">

                <div class="box-title">泳げる海は1つだけ</div>
                <p>波照間島の海は地元沖縄県でもとびっきりの美しさを誇っていることで知られています。透明度の高い水、真っ白な砂浜、穏やかな波と、文句のつけようがないパラダイスのようなビーチです。</p>
            </div>
            <div class="box">

                <div class="box-title">肉眼星空観測</div>
                <p>民家も街灯もなく、文字通り“満天の”星空が広がっています。手に届きそうなほどたくさんの星が輝く空では流れ星や天の川が驚くほどくっきりと輝いており大パノラマの空間に驚くことでしょう。</p>
            </div>

        </div>
    </main>


![【CSS】
](b5560f0ae964efe2b2d285ee60b3cb5c.png)

/* BOX タイトル＆テキスト 共通 */

.main-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    margin: 0 auto;
}

.box {
    max-width: 100%;![![イメージ説明](7d60e9dfd59b95d6be994ceebabe43e5.png)](e051bb6b08c334d02c2ecbb09c5a2e92.png)
}

.box p {
    text-align: center;
}

★［Boxサイズ3等分指定］
@media screen and (min-width: 769px) {
    .main-container {
        box-sizing: content-box;
        width : calc(100% / 3) ;
    }
}

【現状】
https://gyazo.com/590e9bd3db9f2c4e66443529bc61e45c

【実現したいこと】
https://gyazo.com/799a703e7af1a052d3ecb7cb0ca0a431

初歩的質問で恐縮ですがご回答の程宜しくお願い致します。

hatena19

2021/10/16 16:28 編集

画像はツールバーの[画像の挿入]でアップロードしてください。あと、HTMLコードを追記してください。

hiyoko_000001

2021/10/17 02:48

＞hatena19様ご指摘ありがとうございます。・画像挿入・HTMLコード追加させて頂きましたのでご確認頂きたいです。

hatena19

2021/10/17 02:53

ボックスを3等分については下記の回答でできると思いますので、確認ください。

hiyoko_000001

2021/10/17 02:58

gridレイアウト調べてやってみます！ご回答いただきありがとうございます。もし再度上手くできないようであればこちらにコメントさせて頂くかもしれません。宜しくお願い致します。

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

回答1件

ベストアンサー

・PC表示においてボックスを3等分にしたい（幅・高さ均等）

HTMLの提示がないので、推測ですが、
.boxが３つあって、それの幅を3等分したいということなら、

css
1@media screen and (min-width: 769px) {
2    .box {  /* ここのセレクタを.boxに */
3        box-sizing: content-box;
4        width : calc(100% / 3) ;
5    }
6}