find the precious3

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Find the precious!</title>
        <link rel="stylesheet" href="style.css">
    </head>


    <body>
        <main>
            <div class="top">
                <nav>
                    <ul>
                        <li class="title">FindThePrecious.com</li>
                        <li class="fellows_nav">Fellows</li>
                        <li class="contact_nav">Contact us</li>
                    </ul>
                </nav>

                <section>
                    <div class="carousel"></div>

                </section>
            </div>

            <section>
                <h2 class="fellows">Fellows wanted dead <span>(or alive if you want to eat them later)</span></h2>
            </section>

            <section id="articles">
                <article class="photo1"></article>
                <article class="photo2"></article>
                <article class="photo3"></article>
            </section>
            <footer>
                <form method="post" action="data">
                    <h2 class="contact">Contact us</h2>
                    <div class="formulaire">
                        <p>
                            <label for="email"></label>
                            <input type="text" name="email" id="email" placeholder="@" size="100">
                        </p>
                        <p>
                            <label for="address"></label>
                            <input type="text" name="address" id="address" size="100">
                        </p>

                        <p>
                            <label for="reponse"></label>

                            <select name="reponse" id="reponse">
                                <option value="i have seen one of them">I have seen one of them</option>
                                <option value="i haven't seen one of them">I haven't seen one of them</option>
                                <option value="i have seen one of them but he was dead">I have seen one of them but he was dead</option>
                            </select>

                        </p>

                        <p>
                            <label for="message"></label>
                            <textarea name="message" id="message" rows="10" cols="75">Your message</textarea>
                        </p>

                        <button type="submit">Send !</button>
                </form>
            </footer>

        </main>
    </body>
</html>


nav ul li
{
	display: inline;
	list-style: none;
	padding-right: 5%;
	font-family: calibri, arial, rgb(105,105,105);
	font-size: small;


}

.title
{
	font-size: large;
}

.contact_nav
{
	padding-left: 3%;
}


nav ul li:nth-child(2)
{
	background-color: white;
	color: rgb(105,105,105);
	padding-top: 1.5%;
	padding-bottom: 1.3%;
	padding-left: 5%;
}

ul
{
	padding-top: 1%;
}
input, textarea
{
	display: block;
}

body
{
	background-color: rgb(105,105,105);

}

main
{
	margin-right: 20%;
	margin-left: 20%;
	background-color: white;
	font-family: calibri, arial;
}

nav
{
	background-color: rgb(112,128,144);
	color: white

}

.carousel
{
	width:920px;
	height:120px;
	background-color: rgb(220,220,220);
	padding-top: 10%;
	border: 0em;
}

.top
{
	background-color: rgb(220,220,220);
	margin-right: 0.5%;
	margin-left: 0.5%;

}

.fellows
{
	text-align: center;
	font-size: xx-large;

}

span
{
	font-size: small;
}


section article
{
	background: rgb(220,220,220);
	padding: 150px;
	margin: 5px;
	justify-content: center;
}

#articles
{
	display: flex;
	justify-content: center;
}

.contact
{
	margin-top: 15%;
	border-top: 1px solid black;
	margin-right: 1%;
	margin-left: 1%;
	font-family: calibri light, arial;
}

.formulaire
{
	padding-left: 15%;
	padding-bottom: 2%;
	border-radius: 5px 5px 5px 5px;
}

nav ul
{
	padding-bottom: 10px;
}

select
{
	width: 630px;
}