Styling in Reactjs using SCSS - css

Question

I was trying to make the homepage layout for a project that I'm doing with the help of a course and they SCSS to style their Reactjs. But the layout isn't the same to the one in the course even after using the exact same styling. So, please help me out.
Thanks in advance.
Expected :
Result :
Here's the styling :
.homepage {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 80px;
}
.directory-menu {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.menu-item {
min-width: 30%;
height: 240px;
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
margin: 0 7.5px 15px;
&:first-child {
margin-right: 7.5px;
}
&:last-child {
margin-left: 7.5px;
}
.content {
height: 90px;
padding: 0 25px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid black;
.title {
font-weight: bold;
margin-bottom: 6px;
font-size: 22px;
color: #4a4a4a;
}
.subtitle {
font-weight: lighter;
font-size: 16px;
}
}
}
Here's the code :
<div className='homepage'>
<div className='directory-menu'>
<div className= 'menu-item'>
<div className='content'>
<h1 className='title'>HATS</h1>
<span className='subtitle'>SHOP NOW</span>
</div>
</div>
</div>
.
.
.
.
</div>

Answer 1

What you have works. It's a dynamic layout so your viewing width effects it; resize the browser and you'll see:
https://codesandbox.io/s/nifty-kalam-1bx9t?file=/src/styles.scss