Why Doesn't this center both ways on page?

I’m trying the center both ways the .main-card class

  <div class="container">
     <div class="main-card">
    <h1 id="title">My Survey Form</h1>
    <p id="description">This is a short descrioption of the form</p>
    <form id="survey-form">
      <label id="name-label" for="name">Name: </label>
      <input type="text" id="name" required placeholder="Name">
      <label id="email-label" for="email">Email: </label>
      <input type="email" id="number" placeholder="Email">
      <label id="number-label" for="number">Number: </label>
      <input type="number" id="number" min="0" max="4000" placeholder="Number">
      <label for="dropdown">What's your favoriite Pet?</label>
      <select name="" id="dropdown">
        <option value="dog">Dog</option>
        <option value="cat">Cat</option>
        <option value="mouse">Mouse</option>
        <option value="snek">Snek</option>
      <label for="dog">
        <input type="radio" id="dog" name="fav-pet">Dog
      <label for="cat">
        <input type="radio" id="cat" name="fav-pet">Cat
      <label for="snek">
        <input type="checkbox" id="snek" value="snek">Snek
      <label for="mouse">
        <input type="checkbox" id="mouse" value="mouse">Mouse
      <p>Blah Blah Blah</p>
      <button id="submit" type="submit">Submit</button>



@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500&display=swap');
* {
  margin: 0;
  padding;  0;
  box-sizing: border-box;

body {
  font-family: 'Ubuntu', sans-serif;
.container {
   display:  flex;
  align-items: center;

.main-card {
  height: 90vh;
  width: 80vw;
  background: hsl(0, 0%, 10%);
  border-radius: 20px;


@1FootIN try giving your container a height :slightly_smiling_face:

1 Like

It Worked, thanks. …

1 Like