Bootstrap row background image becomes wider than parent grid width - html

Question

I am using bootstrap, I wanted one div behind the other div, so used z-index en position: absolute and relative.
When doing this, every div under the div with z-index: 1 goes behind this div, while I want it to stay under it.
The div also becomes wider than the max-width when using 100%
<div class="row" id="MENUROW">
<div class="col-md-12" id="MENUCOLUMN"><h1>SHOP</h1></div>
</div>
<div class="row" id="MAINROW"> <!-- this has the background-image -->
<div class="col-md-12" id="MAINCOLUMN">
</div>
</div>
CSS:
#MENUROW
{
position: relative;
height: 80px;
background-color: transparent;
z-index: 2;
}
#MAINROW
{
position: absolute;
z-index: 1;
top: 60px; /*because there is 1 div above the menu div, this div needs to be just under that div, behind the menu div */
width: 100%;
background-image: url(../images/background.jpg);
background-size: cover;
}
when doing this the background image goes wider (to the right) than the width of the parent div.
https://jsfiddle.net/2cs60vrr/3/ example, just made the background red to show how wide it should be, the background image goes much wider

Answer 1

Point 1
You didn't used .container class in your HTML. Bootstrap has a structure to get it's maximum feature. You must need to use .container. Bootstrap structure is below:
<div class="container">
<div class="row">
<div class="col-*-*">
Your Content
</div>
</div>
</div>
Make your html as above to solve this issue.
Point 2
If you want not change your html, then use this code below to any .row to solve this issue.
margin-left:0;
margin-right:0;

Answer 2

I am sorry if we are unsure what you are looking for but is that what you want?
.grid {
margin: 0 auto;
max-width: 100%;
width: 100%;
background-color: #fff;
}
.row {
width: 100%;
margin-bottom: 0px;
display: flex;
}
#MENUROW {
position: absolute;
height: 80px;
background-color: red;
z-index: 2;
}
#MAINROW {
position: absolute;
z-index: 1;
top: 0;
width: 100%;
max-width: 1400px;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ed/Palais_Garnier.jpg);
background-size: cover;
}
https://jsfiddle.net/norcaljohnny/xt9c9d2r/2/

Answer 3

You should put the wrapper around the whole thing to position:relative;
And both rows to position:absolute;
That's it.
When using position:absolute; the block goes to the absolute top left corner of the closest parent html tag that has a position:relative;. If there is no parent with position:relative; your absolute positioned items go to the upper left corner of your screen.
(the first row is not a parent of the second, but they are siblings. The wrapper "grid" is the parent of the 2 rows)
<div class="grid">
<div class="row" id="MENUROW">
<div class="col-md-12" id="MENUCOLUMN">
<h1>SHOP</h1>
</div>
</div>
<div class="row" id="MAINROW">
<div class="col-md-12" id="MAINCOLUMN">
text
</div>
</div>
</div>
And CSS
.grid {
position: relative;
}
.row {
width: 100%;
}
#MENUROW {
position: absolute;
background-color: red;
z-index: 1;
}
#MAINROW {
position: absolute;
z-index: 2;
background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/ed/Palais_Garnier.jpg);
background-size: cover;
}
Here is your updated example:
https://jsfiddle.net/2cs60vrr/6/