CSS Class not working after importing in gatsby

I imported a CSS file and want to use the CSS class in it. But my CSS classes are not recognized and not working but the CSS I wrote in the same file targetting HTML tags directly are working. I am using gatsby

My CSS

`section{
    width: 90vw;
    max-width: 1170px;
    text-transform: capitalize;
    margin: 0 auto;
}




.page {
    margin-left: 2rem;
    color: grey;
}
`

My code `

import styles from '../Components/products_module.css';
<section  >
               
<span className={styles.page}>{ * Some code *}</span>
                           
            </section>`

in this above the style for section tag is working but .page class is not working

my gatsby config

     plugins: [`gatsby-plugin-styled-components`   , `gatsby-transformer-sharp`, `gatsby-plugin-sharp` ,
  {
    resolve: `gatsby-source-filesystem`,
    options: {
      name: `images`,
      path: `${__dirname}/src/images/`,
    },
  
      resolve: `gatsby-source-contentful`,
      options: {
        spaceId: `ch9krotu7efpvpc`,
        // Learn about environment variables: https://gatsby.dev/env-vars
        accessToken: process.env.CONTENTFUL_ACCESSS_TOKEN,
      },},
  ],
}