ドットインストールのホームページ作成の練習について質問です。
<section class="voices">のところの背景と<section class="call-to-action orange-bg">のところの背景が横幅が短くなってしまいました。 また、<section class="voices">のところの画像が反映されません。 自分でなぜだか発見できず、お教え頂けませんでしょうか。 よろしくお願いいたします。 ```HTML コード <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>Dotinstall Paneを使ってみよう </title> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous"> <link rel="stylesheet" href="css/styles.css"> </head> <body> <header class="orange-bg"> <div class="container"> <h1>Dotinstall Pane</h1> <p> ドットインストールを見ながら<br> コーディングができるAtomパッケージ </p> <a href="#" target="_blank" class="btn">詳細を見る <i class="fas fa-external-link-alt"></i></a> <img src="img/top.png" width="480" height="270" alt="Dotistall Paneの画像"> </div> </header> <section class="features"> <div class="container"> <h1 data-subtitle="- Features -" class="section-title">Dotinstall Paneの特徴</h1> <section class="feature"> <img src="img/feature1.png" width="420" height="270" alt="特徴1"> <div class="desc"> <h1>すごい特徴があるよ!</h1> <p>いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。</p> </div> </section> <section class="feature"> <img src="img/feature2.png" width="420" height="270" alt="特徴2 "> <div class="desc"> <h1>すごい特徴があるよ!</h1> <p>いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。</p> </div> </section> <section class="feature"> <img src="img/feature3.png" width="420" height="270" alt="特徴3"> <div class="desc"> <h1>すごい特徴があるよ!</h1> <p>いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。いろいろあります。</p> </div> </section> <section class="voices"> <div class="container"> <h1 data-subtitle="- Voices -" class="section-title">利用者の声</h1> <div class="flex"> <section class="voice"> <img src="img/use1.png" width="90" height="90" alt="利用者A"> <h1>利用者A</h1> <p>いい感じです。いい感じです。いい感じです。いい感じです。いい感じです。いい感じです。いい感じです。</P> </section> <section class="voice"> <img scr="img/use2.png" width="90" height="90" alt="利用者B"> <h1>利用者B</h1> <p>いい感じです。いい感じです。いい感じです。いい感じです。いい感じです。いい感じです。いい感じです。</P> </section> <section class="voice"> <img scr="img/use3.png" width="90" height="90" alt="利用者C"> <h1>利用者C</h1> <p>いい感じです。いい感じです。いい感じです。いい感じです。いい感じです。いい感じです。いい感じです。 </P> </section> </div> </div> </section> <section class="call-to-action orange-bg"> <div class="container"> <h1 class="section-title">Dotinstall Paneを使ってみよう!</h1> <a href="#" target="_blank" class="btn">詳細を見る <i class="fas fa-external-link-alt"></i></a> </div> </section> <footer> <p>© dotinstall.com</p> </footer> </body> </html> ``` ```CSS コード body { font-size: 16px; font-family: Verdana, sans-serif; color: #333; margin: 0; }.container {
width: 820px;
margin: 0 auto;
padding: 60px 0;
}
.orange-bg {
color: #fff;
background: url(../img/bg.png);
background-size: cover;
}
.section-title {
text-align: center;
font-weight: normal;
font-size: 24px;
margin-bottom: 60px;
margin-top: 0;
}
.section-title::after {
content: attr(data-subtitle);
display: block;
font-size: 16px;
color: #aaa;
padding-top: 10px;
}
.btn {
display: inline-block;
width: 290px;
background: #fff;
color: #f39800;
text-align: center;
text-decoration: none;
padding: 8px 0;
border-radius: 5px;
opacity: 0.9;
}
.btn:hover {
opacity: 1.0;
}
/* header */
header h1 {
margin-top: 0;
font-weight: normal;
font-size: 36px;
margin-bottom: 8px;
}
header p {
margin-top: 0;
margin-bottom: 50px;
}
header .container {
position: relative;
}
header img {
position: absolute;
bottom: 0;
right: 0;
}
/* features */
.feature h1 {
font-weight: normal;
font-size: 18px;
}
.feature .desc {
width: 360px;
}
.feature:nth-of-type(odd) .desc {
float: right;
padding-left: 40px;
}
.feature:nth-of-type(even) .desc {
float: left;
padding-right: 40px;
}
.feature:not(:last-child) {
margin-bottom: 60px
}
.feature {
overflow: hidden;
}
/* voices */
.voices {
background: #f8f8f8;
}
.voices .flex {
display: flex;
justify-content: space-between;
}
.voice {
width: 250px;
background: #fff;
position: relative;
box-sizing: border-box;
padding: 60px 40px 25px;
}
.voice img {
border-radius: 50%;
border: 10px solid #fff;
position: absolute;
left: 0;
right: 0;
margin: 0 auto;
top: -55px;
}
.voice h1 {
text-align: center;
font-size: 18px;
font-weight: normal;
}
.voices .section-title {
margin-bottom: 95px;
}
/* call-to-action */
.call-to-action {
text-align: center;
}
.call-to-action .section-title {
margin-bottom: 15px;
}
/* footer */
footer {
padding: 40px 0;
text-align: center;
color: #aaa;
}
![イメージ説明](6140f9011ce239194e61828e3525c988.png) ここの利用者の声とDotinstall Paneを使ってみよう!のところ背景の長さを下記headerと同じ長さにしたいです。 ![イメージ説明](2bdc1ffbecc38cc66a33b9914c8ea49c.png)
回答3件
あなたの回答
tips
プレビュー