Bootstrap 4 Grid not floating columns? - html

Question

I've used BS 3 in the past but am completely new to BS 4 & flex; don't really understand it yet. I've set the grid up as it's shown in the documentation but the second col is appearing below the first, rather than to the right.
I've tried adjusting display properties for the row with no luck but don't really know what else to try
HTML
#hero {
height: 30em;
background-color: #373f51;
}
#hero-graphic {
background-color: #DAA49A;
}
#avatar {
width: 20%;
}
#intro-text {
background-color: #DAA49A;
padding: 1em;
margin: 1em;
border-radius: 15px;
}
<div class="container-fluid d-flex align-items-center" id="hero">
<div class="row " id="hero-row">
<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6" id="intro-text">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</p>
</div>
<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6" id="hero-graphic">
<img src="images/avatar.png" alt="" id="avatar">
</div>
</div>
</div>
No error messages

Answer 1

I think the margin: 1em is creating a problem under #intro-text CSS.
Also, you want to add .w-100 on your .row class.
<div class="container-fluid d-flex align-items-center" id="hero">
<div class="row w-100" id="hero-row"> // .w-100 added
<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6" id="intro-text">
...
</div>
<div class="col-sm-12 col-md-12 col-lg-6 col-xl-6" id="hero-graphic">
...
</div>
</div>
</div>
Updated CSS code:
#intro-text{
background-color: #DAA49A;
padding: 1em;
margin:1em;
border-radius: 15px;
}
Working JSFiddle

Answer 2

EDIT: this is a flexbox solution only. I realize your question asks for grid, but you do mention flex in your question and not knowing it well.
check this out as well : https://www.steveaolsen.com/docs/FlexboxCheatsheet.pdf
for flex you would use this on the parent. row lines it up horizontally instead of the vertical behavior you are explaining.
#parent {
display: flex;
flex-direction: row;
}
you would use this on #hero-row to get the 2 divs inside it to be next to each other in a flexbox

Answer 3

You dont need to add d-flex if you are using class row because row has already display:flex behind in the css , I suggest you to learn little flex styling , Bootstrap 4 is way too good , even you dont have write extra css for margins nad paddings
Dont add margin and padding in row col-md-* and there are more you need to understand even 1 px additional margin can ruin your layout