Ubuntu – How to center these card to the centre of the scren

I am working on a project where I need to position a series of cards at the centre of the screen. Centring elements in web design is essential for creating a visually appealing and user-friendly interface, as it draws the viewer’s attention to key content. Whether for showcasing products, displaying information, or highlighting features, proper alignment can enhance a webpage’s overall aesthetics and functionality.

To achieve this, I’ve crafted some CSS code specifically designed to ensure that these cards are centred horizontally and vertically aligned in the viewport. This will create a balanced look that improves user engagement. Below, I will share the CSS code I’ve implemented for this purpose:

* {
    box-sizing: border-box;
  }
  
  body {
    height: 100%;
    background-color: #ebcdcd;
    background-size: auto, cover;
    background-repeat: no-repeat, no-repeat;
    padding-top: 75px;
  }
  
  header {
    background-color: #eb3f3f;
    padding: 1px 0;
    height: auto;
    border: 1px solid #795548;
    margin-bottom: 20px;
    z-index: 1030;
  }
  
  .logo-img {
    height: 100%;
    max-height: 75px;
    border: 1px solid #795548;
    margin-top: 2px;
    margin-bottom: 2px;
  }
  
  .josefin-sans {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    color: #FAFAFA;
    margin-right: 15px;
    font-size: 46px;
  }
  
  .tagline {
    font-size: 1.2rem; 
    font-style: italic;
    margin-top: 0.5rem; 
    color: #f8f9fa; 
  }
  
  .nav-link {
    color: #FFC107;
    font-size: 1.1rem;
    border-radius: 5px; 
    transition: background-color 0.3s, color 0.3s;
  }
  
  .ubuntu-light-italic {
    font-family: "Ubuntu", sans-serif;
    font-weight: 300;
    font-style: normal;
  }

  .noto-sans {
    font-family: "Noto Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-variation-settings:
      "wdth" 100;
  }

  .card {
    min-height: auto;
    display: flex;
    width: 512px;
    background-color: #fff;
    border-radius: 10px;
    margin: 10px;
    overflow: hidden;
    align-content: center;
    flex-direction: column;
  }

  .card .image-box{
    height: 200px;
  }

  .card .image-box img{
    height: 100%;
    border-radius: 8px 8px 0 0;
  }

  .image-box img {
    width: 100%;
    object-fit: cover;
  }

  .card .description{
    display: flex;
    align-items: center;
    column-gap: 12px;
    padding: 15px;
  }

  .card .description img{
    height: 40px;
    width: 40px;
    border-radius: 50%;
  }

  .description .recipe-name{
    font-size: 15px;
    font-weight: 500; 
    text-align: justify;
  }

  .description .ingredients{
    font-size: 12px;
    font-weight: 300;
    color: #777;
    text-align: justify;
  }
  
  footer {
    background-color: #eb3f3f;
    border: 1px solid #795548;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    text-align: center;
}
  
  
  /* Media Queries */
  
  @media (max-width: 1200px) {
    .josefin-sans {
      font-size: 40px;
    }
  
    .nav-link {
      font-size: 1rem;
    }
  }
  
  @media (max-width: 992px) {
    .josefin-sans {
      font-size: 36px;
    }
  
    .nav-link {
      font-size: 0.95rem;
    }
  }
  
  @media (max-width: 768px) {
    header {
      text-align: center;
    }
  
    .josefin-sans {
      font-size: 32px;
      margin-right: 0;
    }
  
    .navbar-nav {
      text-align: center;
    }
  
    .nav-link {
      display: block;
      margin: 0.5rem 0;
    }

  }
  
  @media (max-width: 576px) {
    .logo-img {
      max-height: 50px;
    }
  
    .josefin-sans {
      font-size: 28px;
    }
  
    .nav-link {
      font-size: 0.9rem;
    }
  
    footer {
      padding: 6px 0;
      font-size: 0.8rem;
    }
  
  }
  

I have attached an image of the webpage for your review. This screenshot provides a visual representation of the current layout and design elements, which will help in understanding the context of my project. The image highlights how the various components are arranged, including the positioning of the cards that I am working to center on the screen.

If you have any feedback or suggestions based on the image, please let me know. I appreciate your insights!

enter image description here

In my recent attempt to center the cards on the webpage, I applied specific CSS properties to align them both horizontally and vertically within the viewport. I experimented with various methods, including using Flexbox and Grid layouts, to achieve the desired positioning.

I expected the cards to be perfectly centered, creating a balanced and visually appealing layout. However, I encountered some issues with the alignment, which may have resulted from conflicting CSS rules or container dimensions. I am looking for insights or suggestions on how to resolve these issues and achieve the intended layout.