Border Bottom should touch the two extreme sides of the walls overcoming margin gaps

[codeispoetry]

I want to accomplish this (generated through MS paint) →

Please open the GIF in the new window.

Mr @PaulOB taught me a trick to fill the margin gap by this method on some other post:

box-shadow: 1400px 0px 0px #FFFFFF, -1400px 0px 0px #FFFFFF

where 1400 px is the maximum width allocated to the wrapper.

Are there any such kind of CSS tricks for border-bottom too.

Finally, I should get this →

[coothead]

Hi there codeispoetry,

code is poetry, do try to keep it so.

No tricks, no messing about…

https://codepen.io/anon/pen/ebxoPy

coothead

[codeispoetry]

Hi there @coothead sir,

Actually you didn’t set the padding on the wrapper class, but when the projects are big then we reproduce same layouts at many places. In those situations this solution may be difficult to implement unless you create and bring new layout there.

Any possibility if my pen can bring the desired result as expected → https://codepen.io/codeispoetry/pen/WLJRvM

[Erik_J]

@codeispoetry

Any possibility if my pen can bring the desired result as expected

Try this (there are many ways to do this) on the h1:

.class h1 {
  margin: 0 -20px;
  border-bottom: 2px solid #000;
  padding: 0 20px 10px;
}

Negate the wrapper’s horizontal padding and add it to the h1 to extend the bottom border.

[codeispoetry]

@Erik_J

Negate the wrapper’s horizontal padding and add it to the h1 to extend the bottom border.

This is new learning for me margin is negating the padding? I never knew that this could be possible.

[coothead]

Hi there codeispoetry,

code is poetry, do try to keep it so.

No tricks, no messing about…

https://codepen.io/anon/pen/ebxoPy

coothead

[Erik_J]

@codeispoetry

margin is negating the padding?

That’s old style styling, before modern css, but still very useful.

[codeispoetry]

@Erik_J

old style

Looks like old schools never go out of fashion. Online media can’t out dance print media completely even today.