Border on the left most part of a container - html

Question

I am having a problem on putting a border on the left most part of a section outside a container. I tried putting a margin-left on the container-fluid but the line should be inline with the section only. Right now the line is in the blue line. Please see image for better explanation.
Here's the current code
.store_details_item_wrapper {
padding-left: 20px;
border-left: 10px solid blue;
}
.store_details_img_wrapper {
border: 5px solid black;
height: 100px;
width: 100px;
margin-bottom: 15px;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="section-wrapper">
<div class="container">
<div class="row store_details_row">
<div class="store_details col col-md-4 order-12 order-md-1">
<div class="store_details_img_wrapper">
<img class="store_details_img" media={props.fields.logo} />
</div>
<div class="store_details_item_wrapper">
<div class="store_details_item">
<i class="fa fa-clock" />
Text here
</div>
<hr />
<div class="store_details_item">
<i class="fa fa-parking" />
Text here
</div>
</div>
</div>
<div class="store_description col-12 col-md-8 order-1 order-md-12">
<Image
class="store_description_banner img-fluid"
media={props.fields.herobanner}
/>
</div>
</div>
</div>
</div>

Answer 1

Since you have used border-left this is 1 solution.
or you can use position: absolute and left with negative values to .store_details_item_wrapper
.store_details_item_wrapper {
padding-left: 60px;
border-left: 10px solid blue;
margin-left: -70px;
}
.store_details_img_wrapper {
border: 5px solid black;
height: 100px;
width: 100px;
margin-bottom: 15px;
}
.container-fluid{
border: 2px solid black;}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<div class="container">
<div class="row store_details_row">
<div class="store_details col col-md-4 order-12 order-md-1">
<div class="store_details_img_wrapper">
<img class="store_details_img" media={props.fields.logo} />
</div>
<div class="store_details_item_wrapper">
<div class="store_details_item">
<i class="fa fa-clock" /> Text here
</div>
<hr />
<div class="store_details_item">
<i class="fa fa-parking" /> Text here
</div>
</div>
</div>
<div class="store_description col-12 col-md-8 order-1 order-md-12">
<Image class="store_description_banner img-fluid" media={props.fields.herobanner} />
</div>
</div>
</div>
</div>