画像のように配置したい

前提・実現したいこと

ここに質問の内容を詳しく書いてください。

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

デイトラとは、無料で・・・の文章の配置が画像のような配置にならないです。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3  <head>
4    <link rel="stylesheet" href="css/style.css">
5    <meta charset="UTF-8">
6    <title>練習</title>
7  </head>
8  <body>
9    <header>
10      <img src="img/main-vsual.png">
11    </header>
12
13      <h1>デイトラとは</h1>
14      <section>
15        <div class="pic">
16          <img src="img/about.png" alt="" width="700" height="500">
17        </div>
18
19        <div class="desk">
20          <p class="deitora">デイトラとは、無料で・迷わず・楽しく学べるプログラミング学<br>
21            習アプリです。毎月設定された課題をこなしていくだけで、未経<br>
22            験から30日でプログラミングが身に付きます。<br>
23            1日1題30日でプロのWebエンジニアを目指しましょう！
24          </p>
25        </div>
26      </div>
27    </section>
28
29    <div class="iti">
30    <h1>コース一覧</h1>
31
32    <div class="gazo-box">
33      <img src="img/web_first.png" alt="" width="400"height="200">
34      <p>HTML/CSS/BootStrap</p>
35      <img src="img/web_second.png" alt="" width="400"height="200">
36      <p>HTML/CSS/JavaScript/jQuery</p>
37      <img src="img/web_third.png" alt="" width="400"height="200">
38      <p>PHP/WordPress</p>
39    </div>
40    <h1>お問い合わせ</h1>
41    <h2>さあ今日から始めよう</h2>
42    <div class="btn">無料ではじめる</div>
43  </body>
44</html>
45
46```css
47div.iti {
48  text-align: center;
49}
50
51h1 {
52  color:darkslategray;
53  text-align:center;
54}
55
56section{
57  display:flex;
58}
59
60.pic{
61  margin-right:30px;
62  padding-left: 190px;
63  display: inline-block;
64  /* width: 70px;
65  height: ; */
66}
67
68.desk{
69  flex: 1;
70  margin: 100px;
71}
72
73p.deitora{
74  color:#3399CC;
75  padding-bottom: 100px;
76}
77
78.h2{
79  text-align:center;
80  padding-top:100px;
81}
82
83.gazo-box img{
84  justify-content:space-between;
85  border:1px;
86  padding-right:20px;
87  padding-left:20px;
88  display:inline;
89}
90
91.btn{
92  text-decoration: none;
93  font-weight:bold;
94  font-size: large;
95  display:inline-block;
96  background: #ff6666;
97  width:300px;
98  line-height:3;
99  padding:5px;
100  border-radius:5px;
101  color:white;
102}

試したこと

文に対してPadding-bottomを配置したのですが位置が変わりませんでした。

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

画像の挿入を使ってスクリーンショットを挿入したのですが、なぜか表示されなかったためコードのみの表示です。

退会済みユーザー

2021/01/07 12:51

デイトラとは、無料で・迷わずとか謳って実際の質問者迷ってて草。これで私もプロのWebエンジニアになれると錯覚しちゃうな。

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

回答2件

ベストアンサー

こんにちは。

css
1.desk{
2flex: 1;
3/* margin: 100px; ←削除*/
4}

投稿2021/01/08 01:52

Lhankor_Mhy

総合スコア36138

fakinjax

2021/01/09 01:37

ありがとうございます。

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

position:absoluteで位置調整
z-indexで重ね順を調整

投稿2021/01/07 16:16

Jon_do

総合スコア1373

fakinjax

2021/01/09 01:37

ありがとうございます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.47%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！