I'm struggling with formatting my form on the webpage. I've tried using flex-shrink and resizing the width, but nothing seems to work. Can someone please help me center and align the space around my form properly?
Here is a snippet of my HTML:
body{
font-family: sans-serif;
}
nav{
background-color: rgba(69, 67, 67, 0.756);
}
/* Other CSS rules omitted for brevity */
form{
display:flex;
flex-direction: column;
align-content: space-around;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Find the precious!</title>
<link rel="stylesheet" href="style.css>
</head>
<body>
<nav>
<ul>
<li>FindThePrecious.com</li>
<li>Fellows</li>
<li>Contact us</li>
</ul>
</nav>
<section>
<div class="carousel"></div<
</section>
<section>
<h2 id="fellowsTitle"><a id="subtitle">(or alive if you want to eat them later)</a></h2>
</section>
<section id="fellows">
<article><img src="https://via.placeholder.com/300x300" alt="blabla"/></article>
<article><img src="https://via.placeholder.com/300x300" alt="blabla"/></article>
<article><img src="https://via.placeholder.com/300x300" alt="blabla"/></article>
</section>
<hr>
<h2 id="contactUs">Contact us</h2>
/* Form markup omitted for brevity */
</body>
</html>>>