Currently, I am utilizing Bootstrap for my layout design. The specific task at hand is to have two items positioned outside of the container with borders extending all the way to the edge of the screen. To achieve this, I attempted nesting a container within a container-fluid and applying absolute positioning to the elements that need to appear behind the main container. However, the issue arises when the element's width spans the full screen due to inheriting from the parent container-fluid.
.home__border-gray {
box-shadow:
1px 0 0 0 #DCDCDC,
0 1px 0 0 #DCDCDC,
1px 1px 0 0 #DCDCDC,
1px 0 0 0 #DCDCDC inset,
0 1px 0 0 #DCDCDC inset;
-webkit-box-shadow: 1px 0 0 0 #DCDCDC,
0 1px 0 0 #DCDCDC,
1px 1px 0 0 #DCDCDC,
1px 0 0 0 #DCDCDC inset,
0 1px 0 0 #DCDCDC inset;
}<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f2909d9d868186809382b2c6dcc4dcc2">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid p-0 home__border-gray d-flex flex-row position-relative">
<div class="h-50 home__border-gray position-absolute">1</div>
<div class="container p-0">
<div class="col-12 p-0 home__border-gray d-flex flex-column flex-md-row justify-content-between">
<div class="col-md-6 d-flex flex-column p-4 justify-content-center">
<h1 class="px-4">Container</h1>
</div>
</div>
</div>
<div class="h-50 home__border-gray position-absolute">2</div>
</div>The challenge lies in ensuring that the lines outside the container extend all the way to the edge of the screen. Expected outcome can be viewed here: https://i.sstatic.net/uZhor.jpg