bootstrapのグリッドデザインでmarginを入れるとカラム落ちしてしまう点を解決したいです

Question

前提・実現したいこと

慶應義塾大学病院のWebサイトを摸写しています。
まずはモバイル版のページを作成しているのですが、bootstrapのグリッドデザインが思い通りに動かず苦戦しています。

ブートストラップのグリッドデザインを使ってカード４枚を２×２の表示にはしたのですが、
間に空白がないのでmarginを入れようとしたところ、表示が崩れてしまいました。

初心者の質問で恐縮ですが、ご教示いただけると幸いです。

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

エラーメッセージ

該当のソースコード

    <section class="purpose">
      <div class="container">
        <div class="purpose-cards row">
          <div class="purpose-card col-6">
            <p>初めて受診する方</p>
            <p><img src="image/img_purpose/img_purpose_01.png" alt=""></p>
          </div>
          <div class="purpose-card col-6">
            <p>通院・再来の方</p>
            <p><img src="image/img_purpose/img_purpose_02.png" alt=""></p>
          </div>
          <div class="purpose-card col-6">
            <p>入院・面会の方</p>
            <p><img src="image/img_purpose/img_purpose_03.png" alt=""></p>
          </div>
          <div class="purpose-card col-6">
            <p>人間ドック</p>
            <p><img src="image/img_purpose/img_purpose_04.png" alt=""></p>
          </div>
        </div>
      </div>
    </section>

.purpose-cards {
  margin:30px 0;
}

.purpose-card {
  text-align: center;
  border:solid 1px #CCCCCC;
  padding:15px;
}

.purpose-card img {
  margin-top:10px;
  width:120px;
}

試したこと

今回はborderの枠外に空白を入れたいので、
marginではなくpaddingで調整はできませんでした。

display:flex;
flex-wrap:wrap;
を試しても綺麗に表示されませんでした。

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

関係あるかわかりませんが、
CSSリセットは以下のものを使用しています

/*
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
Twitter: @rich_clark
*/

Answer 1

.purpose-cardの中に divブロックを入れてそれに border を設定するというのが、bootstrap を活かした設計だと思いますが、現状のHTMLのままやるなら、

.purpose-card {
  text-align: center;
  border:solid 1px #CCCCCC;
/*  padding:15px; */
  margin: 15px;
  max-width: calc(50% - 30px);
}

bootstrapの .col-6 には max-width: 50%;が設定されているので、左右マージン分(15px*2)マイナスしておく。

補足

CSSリセットは以下のものを使用しています

bootstrap自体が独自のcssリセットを持っているので、不必要かと。
逆に不具合の原因になりそうです。

Comments

[yujill]

ご丁寧にありがとうございます！
お陰様でレイアウトを綺麗に直すことができました。
今後も同じようなことがあった場合には max-width: calc(50% - 30px); の表記活用します。

bootstrap使う時はCSSリセットいらない点についても勉強になりました！
ありがとうございました

[yujill]

ご丁寧にありがとうございました！
綺麗にレイアウトを直すことができました。
今後も同様のことがあった際には　max-width: calc(50% - 30px);　を活用します。

また、bootstrapではCSSいらない点も勉強になりました。ありがとうございました！

[yujill]

間違えて２回も入力してしまいました・・・。すみません。