In my Next.js app, I am facing an issue with the justify-content: space-between; property not working as expected for two divs inside a container. However, justify-content: center; works fine. Interestingly, when I use the same code in an index.html file, it functions properly.
export default function Home() {
return(
<div className={styles.container}>
<div>1</div>
<div>2</div>
</div>
);
}
CSS file
.container {
padding: 2rem 2rem;
display: flex;
justify-content: space-between;
}
.container div {
color: red;
font-size: 35px;
}