Bootstrap 4 big margin in parent container - html

Question

Okay, this is my 3rd question and hopefully the last one. I get some problems with my page layout that looked like this before:
[navbar]
[1][2][3]
I wanted to achieve this effect when resizing:
[navbar]
[2][3]
[1]
(1st div under the 3rd one)
However, when I use (in the main container that holds all the 3 divs) class container mt-3 I get this layout:
[navbar]
[1][2]
[3]
Now, when I change the margin-left of the 3rd div it doesn't go up to the top row but just moves to the left - something happens like it would be in another row class.
When I use parent-container container mt-3
[navbar]
[1][2] [3]
And they are really small and I can't change the width no matter what I do. I even tried changing the bootstrap's "container" class with both px and %.
container-fluid does the job a bit because all the divs are bigger (and on 100% width of the page) but I would want to have it just like 90%, but still, the [3] div is on the right side mile from the [2]. When I resize the window, the [2] div goes in this white space between [1] and [3] under the [3]. So it looks similar to this:
[navbar]
[2] [3]
[1]
CSS CODE:
.main{
background-color: red;
box-shadow: 3px 3px 20px #000000;
border-radius: 20px;
}
.left{
background-color: green;
max-width: 200px;
border-radius: 20px;
}
.right{
background-color: blue;
max-width: 200px;
border-radius: 20px;
}
.parent-container {
display: flex;
}
.right-content{
width: 100%;
text-align: center;
float: center;
margin-top: 10px;
}
HTML
<div class="parent-container container mt-3">
<div class="row">
<div class="left col-4 col-lg-3 order-last order-lg-first offset-8 offset-lg-0">
<div class="col-12 text-center" style="margin-bottom: 15px">
<h3>TITLE LEFT</h3>
</div>
</div>
<div class=" col-8 col-lg-6">
<div class="container card">
<div class="card-body">
<div class="row">
<div class="col-12 text-center">
<h2>TITLE CENTER</h2>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<h3>heading 3</h3>
<h6>heading 6</h6>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 mx-auto">
<a href="#" class="article-link">
<h3>Heading 3</h3>
<p>Text</p>
</a>
</div>
</div>
<hr>
</div>
</div>
<div class="right col-4 col-lg-3">
<div class="right-content">
<h2>TITLE RIGHT</h2>
</div>
</div>
</div>

Answer 1

You had improper nesting for the columns. Here's the right way to do it (all main columns must sit within the main row):
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.left{
background-color: green;
max-width: 200px;
border-radius: 20px;
}
.right{
background-color: blue;
max-width: 200px;
border-radius: 20px;
}
</style>
<div class="parent-container container mt-3">
<div class="row">
<div class="left col-4 col-lg-3 order-last order-lg-first offset-8 offset-lg-0">
<h3>TITLE LEFT</h3>
</div>
<div class=" col-8 col-lg-6">
<div class="container2 card">
<div class="card-body">
<div class="row">
<div class="col-12 text-center">
<h2>TITLE CENTER</h2>
</div>
</div>
<div class="row">
<div class="col-12 text-center">
<h3>heading 3</h3>
<h6>heading 6</h6>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-12 mx-auto">
<a href="#" class="article-link">
<h3>Heading 3</h3>
<p>Text</p>
</a>
</div>
</div>
<hr>
</div>
<div class="right col-4 col-lg-3">
<div class="right-content">
<h2>TITLE RIGHT</h2>
</div>
</div>
</div>
</div>
Note: Right now the columns aren't stacking on the smallest screens. That's because they aren't specified to do so. To make them stack, the responsive column classes for the smallest screens (col-*) all need to be changed to col-12.
You'd also need to adjust the offset classes because right now the offset-8 class kicks in for all screens that are smaller than lg. The offset-8 class is what causes the offset of 8 units (on the left) on all screens that are smaller than lg.