Bootstrap4 problem : proper column structure inside and outside a container

Question

So i'm working on a task and can't seem to find a proper solution to my problem. I've already made a design inside photoshop to show what I want to create : Photoshop Design.

So basicly I want to have the main part inside a container (including: a paragraph at the left and an image of an icon next to an h1-title [at the right]) --> This all needs to be inside a responsive container.

My question is : how can I create a "black box" or "div" , at the left side next to the container , without it being placed above the container with the main content in, and still be responsive?

I've been struggling the last couple of days with this problem I did already try almost everything (the flex-properties in bootstrap, the col-systems in bootstrap, container inside a fluid container,...) but can't find a way to combine the container-fluid with a casual container... If anyone could help me out, it would definitely help me out a lot! Thanks in advance!

(ps: I don't post the code because everything I tried didn't work out.) Here is an example of how i want the divs to look like : example image

HTML :

    <div class="container-fluid h-50" id="outerContainer">
  <div class="container h-100" id="innerContainer">
    <div class="row">
      <div class="col">
        <p>
          Bij Lux kom je voor een hele avond. Geniet van een diner tot 6
          gangen en drink de betere wijnen per glas, maar neem je aperitief
          en digestief in onze bar Festiv. Zo ervaar je twee totaal
          verschillende sferen zonder het pand te moeten verlaten en ben je
          even helemaal van de wereld geweest.
        </p>
      </div>
      <div class="col text-center">
        <img src="/images/icons/lightbulb.svg" id="iconScale" class="img-fluid" alt="concept icon" />
      </div>
      <div class="col">
        <h2>
          CONCEPT
        </h2>
      </div>
    </div>
  </div>
</div>

CSS :

html,
body{
  height: 100%;
}

#innerContainer{
  background-color: black;
}

#outerContainer{
  background-color: black;
}

#iconScale{
  max-width: 100px;
}

h2{
  color: #d8a55d;
  font-size: 4rem;
}

p{
  color: white;
}

Answer 1

• You can achieve this from different ways. In which one way is you can use Pesudo element like :before for this.
• I have implement this thing in codepen please check this link: codepen You can read more about Pesudo elements from this link: Pesudo Element

.container{
    width: 700px;
    margin: auto;
}
.background-outside {
    height: 300px;
    width: 100%;
    outline: thin solid black;
    position: relative;
    background: white;
}

.background-outside::before {
    height: 100%;
    content: ' ';
    position: absolute;
    top: 0;
    bottom:0px;
    width: 100%;
    left: -100%;
    background-color: green;
}

<div class="container">
    <div class="background-outside">

    </div>
</div>