text-align: centerが反映されず困っています。

該当コードです。

html:
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-lg-4 hairdresser">
        <a href="#"><img id="img" src="img/ezaki1.jpg"></a>
        <h5>美容師の自己ブランディングセミナー</h5>
        <p>全国約４８万人の美容師の中で埋もれないための自己ブランディングについて講習します。
        </p>
      </div>
      <div class="col-md-6 col-lg-4 hairdresser">
        <a href="#"><img id="img" src="img/takagi1.jpg"></a>
        <h5>メンズカットセミナー</h5>
        <p>メンズカットの最新流行スタイルについて講習します。
        </p>
      </div>
      <div class="col-md-6 col-lg-4 hairdresser">
        <a href="#"><img id="img" src="img/tutida1.jpg"></a>
        <h5>ヘアアレンジセミナー</h5>
        <p>インスタ映えするヘアアレンジについて講習します。
        </p>
      </div>
      <div class="col-md-6 col-lg-4 hairdresser">
        <a href="#"><img id="img" src="img/utida1.jpg"></a>
        <h5>リアルサロンワーク</h5>
        <p>モデル２名の最新トレンドカット＆スタイリング展示。
        </p>
      </div>
    </div>
  </div>

css:
.container {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

該当部分プレビューです。
![

hatena19

2020/03/29 23:59

クラス名をみるとBootstrapのようですが、Bootstrapは使用してますか。しているなら、Bootstrapタグを追加してください。あと何を中央寄せしたいか明確にしてください。（text-align: centerは反映されてます。）

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

回答2件

ベストアンサー

勘で書きます。おそらくやりたいことは以下の図のようなことだと思います。

.col-xxxと.col-xxxの間の余白をmarginで指定しているなら間違いです。
右側に余白が生じてしまうのを避けることはできません。

HTML
1<div class="row">
2  <div class="col-md-6 col-lg-4 hairdresser">
3    <!-- divを1つ追加 -->
4    <div class="border">
5      <a href="#"><img id="img" src="img/ezaki1.jpg"></a>
6      <h5>美容師の自己ブランディングセミナー</h5>
7      <p>全国約４８万人の美容師の中で埋もれないための自己ブランディングについて講習します。</p>
8    </div>
9  </div>
10  ...
11</div>

CSS
1.col-md-6,
2.col-lg-4 {
3  padding-top: 15px;
4  padding-bottom: 15px;
5  
6  /* col-xxxにmargin指定しているならコメントアウト */
7  /* margin-right: 40px; */
8  
9  /* 左右の余白を指定したいなら、とりあえず以下。!importantを指定するのは微妙ですが.. */
10  padding-left: 20px !important;
11  padding-right: 20px !important;
12}
13/* https://getbootstrap.com/docs/4.4/utilities/borders/ */
14.border {
15  padding: 15px;
16  height: 100%;
17  box-sizing: border-box;
18}