CSS Style not loading for the second container in NextJS - css

Question

I have a two basic div containers and I am trying to apply some styles to it. I do import my CSS styles from a separate .module.css file and the first style gets picked up in the className property, when assigned. However, the same thing is not working for the second div. The css property for class 'sales' is not being picked up
dashboard.js
import HomeSalesmanStyles from '../../../styles/SalesmanHome.module.css';
const HomeSalesman = ({name}) => {
return(
<>
<div className={HomeSalesmanStyles.container}>
<h4>
Hello, {name} 👋
</h4>
</div>
<div className={HomeSalesmanStyles.sales}>
Hello
</div>
</>
)
};
export default HomeSalesman;
SalesmanHome.module.css
.container {
display: flex;
justify-content: center;
margin-top: 5%;
};
.sales {
display: flex;
justify-content: center;
width: 100px;
background-color: red;
}
Any ideas where the issue is?
----------- Edit ------------
The issue was wrong css module name import! After correcting to the right file, everything works.

Answer 1

This looks like a syntax error in the CSS: adding a semicolon after a rule is invalid.
.container {
display: flex;
justify-content: center;
margin-top: 5%;
} /* <- no semicolon */
.sales {
display: flex;
justify-content: center;
width: 100px;
background-color: red;
}
<div class="container">
<h4>
Hello, {name} 👋
</h4>
</div>
<div class="sales">
Hello
</div>