Initially, your question lacks clarity but I have attempted to comprehend it based on your mention of editing.
Bootstrap operates using a grid system. When you assign a class like col-4, it creates a small box (column) within the grid for you to place your elements in, leaving the rest of the row empty. Additionally, as HTML divs function in a parent/child relationship, setting width: 100%; (CSS) in a col-8 inside a container will not stretch the container as expected.
To achieve the desired result, you need to modify the CSS attributes of the container. Alternatively, consider creating an additional parent div before the container and applying CSS to that instead.
It seems like you are aiming for something similar to the referenced image below. The background colors added to the divs serve as visual cues to illustrate the changes made. This approach should address your query regarding adding background colors.
https://i.sstatic.net/U05dT.png
Below is the code snippet:
<body>
<div style="background-color: green;">
<div style="background-color: blue;">
<div class="container">
<div class="col-8" style="background-color: red; width: 100%;">
<div class="row" >
</div>
<div class="row my-panel">
<!-- i want to fill this panel with a full width background color -->
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores iusto consectetur,
aliquid laborum dicta nobis magni atque voluptatem ullam, natus deserunt, animi corrupti sunt nesciunt fugiat asperiores nam delectus quam.
</div>
</div>
</div>
</div>
<div class="col-4" style="background-color: yellow;">
<!-- a sticky top panel which vertically scroll with the page -->
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores iusto consectetur,
aliquid laborum dicta nobis magni atque voluptatem ullam, natus deserunt, animi corrupti sunt nesciunt fugiat asperiores nam delectus quam.
</div>
</div>
</body>