Module.css not loading styles NEXT js

Question

I'm trying apply module.css to one of my components according to this guide https://nextjs.org/learn/basics/assets-metadata-css/layout-component.

/*/components/Livestream/App.js*/

import styles from './App.module.css';
...
return (
<div className={styles.container}>
 <main>
    <div className='live-stream'>
...
export default App;

/*/components/Livestream/App.module.css*/

.container main {
  align-items: center;
  display: flex;
  height: 100vh;
  justify-content: center;
}

.container main .live-stream {
  background-color: #000615;
  display: flex;
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}

However only the main tag gets the css styling and not the class live-stream:

Answer 1

Solved like :

<div className={styles.container}>
  <main>
    <div className={styles.liveStream}>

 #CSS
.container main .liveStream {
 // styles
 }