グリッドレイアウトを中央寄せにしたい

コーディング練習中の初心者です。

グリッドレイアウトを使用し画像の様なレイアウトを作成しておりました。

↓見本

↓私が現在作成しているもの

画像が違うのでわかり辛くなっていてすみません。

ものづくりとは　という所、
グリッドレイアウトを使用し、なんとかアイテムを横並びにすることに成功しました。

しかし、お手本の様に、両脇に空白が欲しいのです。

marginで左右に空間を付けてみたり
何パターンか試してみたのですが、
きれいに枠ができません。。。

初歩的な質問になり申し訳ないのですが、
ご回答の程、よろしくお願いします。

HTML
1<section class="company-greeting">
2   <div class="content-wrapper">
3      <div class="contents">
4        <img src="img/cat.jpg">
5        <div class="content">
6          <h2>ものづくりとは</h2>
7          <p>本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります本文が入ります</p>
8        </div>
9      </div>
10  </div>
11 </section>``
12
13
14
15```CSS
16.company-greeting {
17margin-bottom: 120px;
18}
19
20.company-greeting .contents{
21display: grid;
22grid-template-columns: 1fr 1fr;
23grid-gap: 20px;
24justify-content: center;
25}
26
27.company-greeting h2{
28margin-bottom: 50px;
29text-align: center;

kei344

2020/05/02 07:57

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。 ※ コードと```の間に改行が無いのでは。

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

回答2件

ベストアンサー

レスポンシブレイアウトにするなら、通常は下記のような設計します。

css
1.company-greeting .contents{
2  display: grid;
3  grid-template-columns: 1fr 1fr;
4  grid-gap: 20px;
5  justify-content: center;
6  max-width: 1000px; /*最大幅を設定*/
7  margin: 0 auto;    /*中央寄せ*/
8}