I’m trying the center both ways the .main-card class
<main>
<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>
</select>
<label for="dog">
<input type="radio" id="dog" name="fav-pet">Dog
</label>
<label for="cat">
<input type="radio" id="cat" name="fav-pet">Cat
</label>
<label for="snek">
<input type="checkbox" id="snek" value="snek">Snek
</label>
<label for="mouse">
<input type="checkbox" id="mouse" value="mouse">Mouse
</label>
<p>Blah Blah Blah</p>
<textarea></textarea>
<button id="submit" type="submit">Submit</button>
</form>
</div>
</div>
</main>
@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;
justify-content:center;
align-items: center;
}
.main-card {
height: 90vh;
width: 80vw;
background: hsl(0, 0%, 10%);
border-radius: 20px;
}
