How to have one container with styling instead of container and container styling being applied individually to each blog post

Wasn't quite sure how to describe title, but this is for a blog page using Hygraph, Next.js and Bootstrap. I want the blogposts to be viewed as cards but when I try to do some styling on the page in applies to each individual card instead of the page as a whole. Am I missing something obvious or is there a better way to go about it? page code below.

import { GraphQLClient } from 'graphql-request';

export async function getStaticProps() {
  const hygraph = new GraphQLClient(
    'https://api-us-east-1.hygraph.com/v2/cl7r7p82h60bn01uh5lvrb3ja/master'
  );

  const { blogposts } = await hygraph.request(
    `
      {
        blogposts {
          slug
          title
          content{
            text
          }
        }
      }
    `
  );

  return {
    props: {
      blogposts,
    },
  };
}


export default ({ blogposts }) =>
  blogposts?.map(({ slug, title, content }) => (
      <div className='container-fluid abt-cnt news-cnt'>
        <div class="card blog-post" style={{width: "auto"}}>
          <div class="card-body">
            <h5 class="card-title text-center">{title}</h5>
            <p class="card-text">{content.text}</p>
          </div>
        </div>
      </div>
  ));