Currently, I'm in the process of developing a website with react and I've encountered an issue with centering elements vertically on the left and right sides. It's been troubling me for a few days now and I haven't found a solution yet.
The layout consists of a div that contains two elements - one on the left and one on the right.
.whatbdh_content-bottom {
background: #eee;
display: flex;
flex-direction: row;
padding: 2rem;
}
.whatbdh_content_left {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-left: 2rem;
margin-right: 2rem;
}
.whatbdh_content-grid {
max-width: 1140px;
margin: auto;
display: grid;
grid-gap: 40px;
grid-template-columns: repeat(2, 1fr);
}
.card {
text-align: center;
padding: 1rem;
border: 1px solid #000;
color: #000;
}
.whatbdh_content_right {
flex: 1;
display: flex;
justify-content: center;
align-items: center;
margin: 5rem;
}
.whatbdh_content_right svg,
img {
max-width: 100%;
height: auto;
max-height: 100%;
}
@media screen and (max-width: 640px) {
.whatbdh_section {
flex-direction: column;
margin: 0 0 3rem;
}
}
@media screen and (max-width: 980px) {
.whatbdh_content-grid {
max-width: 90%;
margin: auto;
grid-template-columns: 1fr;
}
}<div className='whatbdh_content-bottom'>
<div className='whatbdh_content_left'>
<h1 className='title_text'>Not the best title right now</h1>
<div className='whatbdh_content-grid'>
<div className='card'>
<p>We will show up</p>
</div>
<div className='card'>
<p>We will show up <br />okay</p>
</div>
<div className='card'>
<p>We will show up <br />okay</p>
</div>
<div className='card'>
<p>We will never show up, <br /> okay </p>
</div>
</div>
</div>
<div className='whatbdh_content_right'>
<img src={arrow2}/>
</div>
</div>I am looking to horizontally align my left and right content, additionally, I am unsure why my image disappears on a small screen. Thanks in advance