Layout in the parent component of child components that use css modules

Question

I have different components (Header, MoviesList, Footer) that use css modules, I have Main component and don't know how to find the right way to layout the child components

I found one way to solve the problem, but I don't know if it is the right approach

import React from 'react';
import s from "./styles/main.module.scss"

const Main = () => {
    return (
        <div className="main">
            <div className={s.header}><Header/></div>
            <div className={s.homeContent}><HomeContent/></div>
            <div className={s.navigation}><Navigation/></div>
        </div>
    );
};

export default Main;