06 - CSS : box model

<!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 class="a">FindThePrecious.com</li>
                <li class="a">Fellows</li>
                <li class="a">Contact us</li>
            </ul>
        </nav>
        <section>
            <div class="carousel"></div>
        </section>
        <section>
            <h2 id="fellows">Fellows wanted dead <span>(or alive if you want to eat them later)</span></h2>
        </section>
        <section id=art>
            <article></article>
            <article></article>
            <article></article>
        </section>
        <form>
            <h2 id="contactus">Contact us</h2>
            <input type="email" placeholder="@">
            <input type="text" placeholder="&#8962;">
            <input type="text" placeholder="I have seen one of them">
            <textarea placeholder="Your message"></textarea>
        </form>
    </body>
</html>


-----------------------------------------------------------------------------------------------------------


nav{
    height: 40px;
    background-color:#3a3a3a;

}

ul {
    list-style: none;
    margin: 0;
}


li {
    display: inline-block;
    color: white;
    margin-right: 20px;
    margin-top:10px;

}

.carousel {
    background-color: whitesmoke;
    height: 150px;
    width: 100%
    }

article{
    display: inline-block;
    width: 400px;
    height: 300px;
    background: whitesmoke;


}

#art {
    text-align:center;
}

span{
    font-size: 18px;


}

input, textarea{
    width: 80%;
    margin: 0 auto;
    display: block;
    margin-top: 10px;
}

#contactus {
    text-align: left;
}

#fellows {
    text-align: center;
}