Stacking divs with position:absolute

Question

I am using a CMS (Ektron), using Bootstrap as a framework.

I have access to write HTML and CSS but only within the <div class="container">, so I basically start off with <div class="row">.

I am trying to make some DIVs full width. I can do it with:

.full-width-div{
height:100vh;
width:100vh;
position:absolute;
left:0;
}

But then I am having issues of the next full width div stacking on top. I can use margin-top:800px to position the lower div and then use media queries to tediously control the positioning.

Is there a better way of doing it? Feel free to forward me to any duplicate questions. I can't seem to find the answer as I don't have control outside of the <div class="container">.

Answer 1

With this being in Bootstrap, I ended up setting:

.container{
width:100%;
}

Which then just allowed me to use rows for the rest of the items.

Thanks for all your help!