How can I get the div#graph_div to start its margin after the div#roi-div and div#win-div elements? - html

Question

Currently the graph_div is positioned above the win and roi divs. What is causing it to do this and how can I fix it? See below for the code and screenshots from the inspection in chrome.
The html is using JSX, if it looks off. I did not include the entire component as it is mainly irrelevant to the issue.
#import '../utils/variables.scss';
// Media Queries
// S and XS Screens
#media screen and (max-width: 768px){
#graph_div{
#graphCarousel{
bottom: 0;
left: 0;
width: 100%;
}
a.carousel-control-prev, a.carousel-control-next{
transform: scale(0.5);
}
div.carousel-indicators{
position: fixed;
top:515px;
> button{
background-color: $lineleader-red !important;
border-radius: .1rem;
}
}
a.carousel-control-prev, a.carousel-control-next{
position: absolute;
top: 275px;
}
}
}
// Global Styling
#header{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 3rem;
background: #F9FBFC;
margin-bottom: 1rem;
h6{
float: right;
img{
height: 12px;
}
}
}
#stats_div, #criteria_div, #graph_div{
margin: 1rem .5rem;
padding: 10px;
}
div.sysView{
border: 1px solid #dcdfe0;
> div{
padding: 0rem 1rem;
}
.bet-div, .record-div, .crit-div{
margin-bottom: 1rem;
h5:after{
border-bottom: 2.5px solid #dcdfe0;
content: '';
display: block;
width: 1.5rem;
}
}
.bet-div, .record-div{
display: inline-block;
width: 50%;
}
.record-div{
float: right;
width: auto;
}
.win-div, .roi-div {
margin: 1rem;
display: flex;
align-items: center;
justify-content: center;
height: 75px; /* adjust this to desired height */
width: 75px; /* adjust this to desired width */
div{
text-align: center;
}
}
.win-div, .roi-div {
position: relative;
margin-bottom: 30px;
}
.win-div {
float: left;
}
.roi-div {
float: right;
}
.green{
border:1px solid #dcdfe0;
background-color: #ecfdf3;
color: #15b86c;
}
.red{
border:1px solid #dcdfe0;
background-color: #fbe9eb;
color: $lineleader-red;
}
.up-caret{
position: absolute;
top: -18px;
height: 18px;
}
.down-caret{
position: absolute;
bottom: -18px;
height: 18px;
}
}
<div className='page-section'>
<div className='sysView'>
<div id="header">
<h4>{system.name}</h4>
<h6 onClick={()=>{navigate('/mlb/beta', {state:{system:system, type:"edit"}})}}>Edit <img src={forward} alt=""/></h6>
</div>
<div className="bet-div">
<h5>Bet</h5>
{system.bet}
</div>
<div className="record-div">
<h5>Record</h5>
{system.p > 0 ? (system.w +"-"+system.l+"-"+system.p) : (system.w+"-"+system.l)}
</div>
<div className="crit-div">
<h5>Criteria</h5>
{system && system.criteria &&
(system.criteria.map((crit,i)=>{
return(
<p key={i}>{crit.label}</p>
)
}))
}
</div>
<div id={`win-div-${system._id}`} className="win-div">
{system.w/(system.w+system.l)*100 > 55 && <img id={`win-caret-${system._id}`} src={greenCaret} alt=""/>}
<div>
<h5>Win</h5>
{system.roi !== "NaN" ? (system.w/(system.w+system.l)*100).toFixed(2) : 0}%
</div>
{system.w/(system.w+system.l)*100 < 55 && <img id={`win-caret-${system._id}`} src={redCaret} alt=""/>}
</div>
<div id={`roi-div-${system._id}`} className="roi-div">
{system.roi > 0 && <img id={`roi-caret-${system._id}`} src={greenCaret} alt=""/>}
<div>
<h5>Roi</h5>
<span>{system.roi !== "NaN" ? system.roi : 0}% </span>
</div>
{system.roi < 0 && <img id={`roi-caret-${system._id}`} src={redCaret} alt=""/>}
</div>
<div id="graph_div">
<Carousel id="graphCarousel" variant="dark">
<Carousel.Item>
<WLChart sznWL={sznWL} />
</Carousel.Item>
<Carousel.Item>
<WinPerChart sznWL={sznWL} />
</Carousel.Item>
<Carousel.Item>
<ProfitChart sznWL={sznWL} />
</Carousel.Item>
</Carousel>
</div>
</div>
</div>