この原因を追究するために
Googleツールを利用し、確認しましたがなぜ初めのliだけ余白が残るのか
理解できず、質問しています。
大変恐れ入りますが、教えていただけると幸いです。
前提・実現したいこと
余白が無駄に残っている現状があります。原因を追究し、下記の画像にしたいです。
発生している問題・エラーメッセージ
余白が無駄に残っている現状があります。画像のオレンジの外側です。
該当のソースコード
HTML
1<section class="features"> 2 <div class="inner blog-bg"> 3 <p class="jp-ttl">ユアコーディング3つの特徴</p><!-- /.jp-ttl --> 4 <p class="en-ttl">FEATURES</p><!-- /.en-ttl --> 5 6 <!--1--> 7 <h4 class="features-ttl">高速コーディング</h4><!--features-ttl / --> 8 <ul class="features-list"> 9 <li class="features-item features-flex"> 10 <figure><img class="feat-img" src="./image/cto.png" alt=""></figure> 11 <div class="features-txt"> 12 <p class="feat-sub">コーディングに特化したフリーランスのため、 スピード感を持った開発が可能。</p> 13 <p class="features-desc">開発は常にスピードとの勝負です。<br> ユアコーディングはコーディングに特化しているため、 <br> 素早く納品することで、クライアントがデザインに注力 <br> する助けとなります。</p><!-- /.feat-dec --> 14 </div><!-- /.feat-txt --> 15 </li><!-- /.features-item --> 16 </ul><!-- /.features-list --> 17 18 <!--2--> 19 <h4 class="features-ttl">高品質</h4><!--features-ttl / --> 20 <ul class="features-list"> 21 <li class="features-item features-flex"> 22 <figure><img class="feat-img" src="./image/building_website.png" alt=""></figure> 23 <div class="features-txt"> 24 <p class="feat-sub">正しいマークアップで、 内部SEOに強いコーディングを デフォルトで行います。</p> 25 <p class="feat-desc">ユアコーディングでは、「予測しやすい」「再利用しやすい」<br> 「保守しやすい」「拡張しやすい」と言った設計をもとに <br> きちんとコーディングを行うため、納品後も安心です。</p><!-- /.feat-dec --> 26 </div><!-- /.feat-txt --> 27 </li><!-- /.features-item --> 28 </ul><!-- /.features-list --> 29 30 <!--3--> 31 <h4 class="features-ttl">迅速なレスポンス</h4><!--features-ttl / --> 32 <ul class="features-list"> 33 <li class="features-item features-flex"> 34 <figure><img class="feat-img" src="./image/new_message.png" alt=""></figure> 35 <div class="features-txt"> 36 <p class="feat-sub">原則いただいたメッセージは、 業務時間内であれば6時間以内に お返しいたします。</p> 37 <p class="feat-desc">連絡を返さないフリーランスが多い中、 <br> ユアコーディングでは定期的な進捗報告など、 <br> 社会人としての基本を踏まえて仕事を行なって <br> おります。</p><!-- /.feat-dec --> 38 </div><!-- /.feat-txt --> 39 40 </li><!-- /.features-item --> 41 </ul><!-- /.features-list -->
feat.scss
1features.scss 2 3.features{ 4 .features-ttl{ 5 font-size: 2.8rem; 6 line-height: 1.4; 7 color: $txt-color; 8 font-weight: bold; 9 text-align: center; 10 11 } 12 13 .features-list{ 14 margin: 0 auto; 15 16 .features-item{ 17 display: flex; 18 justify-content: space-between; 19 align-items: center; 20 margin-top: 50px; 21 22 .feat-img{ 23 display: block; 24 width: 380px; 25 margin-left: 152px; 26 } 27 28 .features-item:nth-child(2){ 29 display: flex; 30 flex-direction: row-reverse; 31 .feat-img{ 32 display: block; 33 width: 380px; 34 margin-right: 135px; 35 36 } 37 } 38 } 39 40 41 .features-txt{ 42 width: 500px; 43 height: 350px; 44 45 .feat-sub{ 46 display: block; 47 font-size: 2.4rem; 48 line-height: 2; 49 font-weight: bold; 50 margin-bottom: 54px; 51 52 } 53 .feat-desc{ 54 55 } 56 } 57 58 } 59}
試したこと
googleツールで原因を探すも、コードが表記されず、余白の原因がつかめない。
marginの原因かと考え、features-txt、などをチェック
<1>→<2>にコピペして変更→classm名の間違いかを確認
回答2件
あなたの回答
tips
プレビュー