親要素に適用しているpaddingを特定の子要素だけ外したい

Question

前提・実現したいこと

一番上の <main>のスタイル padding: 0 50px が適用されている為、画像の丸を書いている部分（h２タグのborder-bottom）に余白が出来ているのですが、親要素いっぱいにborder-bottomを引きたいです。

否定擬似クラスを使ったりしたのですが、レイアウトが崩れてしまいます。

みなさんならどう対処するのか教えて頂きたいです。
やはり否定擬似クラスを使うのがが正解でしょうか。

該当のソースコード

    <main>
      <section id="wrap1">
      　<h2 class="sample">サンプル</h2>
      　<p>ここの「サンプル」ページでは、XeoryBase を使うとコンテンツをどのように表現することができるか確認できます。</p>
      　<p class="heading_1">見出し１</p>
      <div>
        <img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/sample-pic-300x200.png">
      　<p>記事を作成すると必ずと言っていい程使用するのが画像です。画像は次のように右寄せにするとこのように表示されます <br>
      　　　記事を作成すると必ずと言っていい程使用するのが画像です。画像は次のように右寄せにするとこのように表示されます。
　　　　 </p>
      </div>
      </section>
    </main>

    <aside>
    </aside>
  </div>

Comments

[hatena19]

現状のCSSコードも提示してください。

Answer 1

現状のCSSが不明なので、とりあえずのアイデアだけ。
ネガティブマージンで50px広げて、パディングで50px狭める。

main {
  padding: 0 50px;
}

main h2 {
  border-bottom: 1px solid gray;
  margin-left: -50px;
  margin-right: -50px;
  padding-left: 50px;
  padding-right: 50px;
}

Comments

[hdo]

そのまま記述したら見事にできました。
ネガティブマージンは違うかと諦めていたのですが理解が足りなかったようです。
勉強になりました、ありがとうございます。

Answer 2

余白をきかせたくない要素の親要素にpaddingを適用しているのが、そもそも間違いだと思います。

<section id="wrap1">
  <h2 class="sample">サンプル</h2>
  <div> <!-- ここにdivをもう一個つくって、これにpaddingを適用しましょう -->
    <p>ここの「サンプル」ページでは、XeoryBase を使うとコンテンツをどのように表現することができるか確認できます。</p>
    <p class="heading_1">見出し１</p>
    <div>
      <img src="https://xeory.jp/extension/wp-content/uploads/sites/4/2014/10/sample-pic-300x200.png">
      <p>
        記事を作成すると必ずと言っていい程使用するのが画像です。画像は次のように右寄せにするとこのように表示されます <br>
        記事を作成すると必ずと言っていい程使用するのが画像です。画像は次のように右寄せにするとこのように表示されます。
      </p>
    </div>
  </div>
</section>

余談
こうやって人にみせるときのためにも、
インデント（余白）は普段からきれいに整えておくと印象がいいですよ。

Comments

[H40831]

回答に低評価をつける際に「低評価の理由を明確に伝え、適切な回答に修正してもらいましょう。」と表示されると思いますので、質問者様および私の後学のためにも、具体的にどう良くなかったのか教えていただけたら幸いです。

コメントがないということは「なんとなく気に入らない」という事でしょうか

[hdo]

ご回答ありがとうございます。
これでは結果が一緒でした。cssの記載がなかったせいだと思います、すみません。
インデントの件ご指摘ありがとうございます。

[H40831]

いいわすれていましたが、追加したdivにpaddingを適用した場合、
親要素（<section>）のpaddingは消していただくことになります。
そのようにしても結果は一緒になってしまうのでしょうか？

（ネガティブマージンで問題は解決済みかと思いますので、
他の方法も知りたいというわけじゃなければ試さなくても大丈夫です。）