Untitled

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Find the precious!</title>
        <link rel="stylesheet" href="style2.css">
    </head>
    <body>
        <nav>
            <ul>
                <li id="find">FindThePrecious.com</li>
                <li id="fellows">Fellows</li>
                <li>Contact us</li>
            </ul>
        </nav>
        <div>

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

        </div>

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

        </section>
        <div id="sect-art">

                <article>
                    <h3>The Wizard</h3>
                    <img src="https://via.placeholder.com/300" alt="wizard"></article>
                <article>
                    <h3>The Hobbit</h3>
                    <img src="https://via.placeholder.com/300" alt="hobbit"></article>
                <article>
                    <h3>Yummy Dwarf</h3>
                    <img src="https://via.placeholder.com/300" alt="dwarf"></article>
        </div>

            <hr>

            <h2 id="contact">Contact us</h2>
                <form>

                    <div>
                        <label for="mail"></label>
                        <input type="email" id="mail" placeholder="@">
                    </div>
                    <div>
                        <label for="home"></label>
                        <input type="text" id="home" placeholder="&#8962;">
                    </div>
                    <div>
                        <select id="one-of-them">
                        <option  value="one-of-them">I have seen one of them :</option>
                        </select>
                    </div>
                    <div>
                        <label for="msg"></label>
                        <textarea id="msg" placeholder="Your message"></textarea>
                    </div>

                </form>
    </body>
</html>


 body {
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
}

nav {
    background-color: #000;
    color: #fff;
    height: 40px;

}

.carousel {
    background-color: #999;
    height: 300px;
}

#find {
    font-size: 25px;
    padding-top: 5px;
    font-weight: bold;
}

#fellows {
    margin-right: 20px;
    margin-left: 30px;

}

#sect-art {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-bottom: 10%;
    padding-top: 2%
}

#fellows-wanted {
    text-align: center;
    font-size: 25px;

}

span {
    font-size: 20px;
}

#contact {
    font-size: 25px;
    padding-bottom: 10px;

}


ul{
  list-style-type: none;
  font-size: 0;
}

ul li{
  display: inline-block;
  font-size: 15px;
}

h3,.hidden {
    font-size: smaller;
    visibility: hidden;
}

form {
    margin-left: 250px;
}

input, textarea {
    width: 1000px;
    padding: 4px;
    vertical-align: top;
    font: 2em sans-serif;
    border: 1.5px solid #000;
    border-radius: 3px;
}

textarea {
    height: 100px;
}
select {
    width: 1010px;
    padding: 4px;
    border : 1.5px solid #bdbbbb;
    font: 2em sans-serif;
    margin-top: 10px;
    margin-right: 20px;
    border-radius: 3px;

}

label {
    display: block;
    margin-bottom: 10px;
    margin-right: 20px;
    vertical-align: top;
    text-align: right;
}