Nested Rows Larger Than Parent - html

Question

I have an issue with Bootstrap 4 grid layout & I'm working with Vertical forms.
I would like to nest col-lg-9(child) inside col-lg-6(parent).
for Example:
<div class="form">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="">First name</label>
<input class="form-control" type="text">
</div>
<div class="form-group">
<label for="">Last name</label>
<input class="form-control" type="text">
</div>
</div>
<div class="row">
<div class="col-lg-9">
<div class="col">
<div class="form-group">
<label for="">City</label>
<input type="text">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="">Street</label>
<input type="text">
</div>
</div>
<div class="col">
<div class="form-group">
<label for="">Zip</label>
<input type="text">
</div>
</div>
</div>
</div>
<div class="form-group">
<label for="">Email address</label>
<input class="form-control" type="text">
</div>
<div class="form-group">
<label for="">Additional info</label>
<input class="form-control" type="text">
</div>
</div>
</div>
Created a sample mock-up for additional explanation.

Answer 1

It's because you are nesting columns directly inside other columns. Don't' do that.
When nesting in a column you must first put a Bootstrap row inside it and then put at least one Bootstrap column inside that new row.
Don't ever nest a Bootstrap column directly inside another Bootstrap column.
Here's the nesting structure you must have in your case:
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-lg-9">
content goes here
</div>
</div>
</div>
</div>
</div>
Reference:
https://getbootstrap.com/docs/4.0/layout/grid/#nesting