Flexbox

<!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><a href="#" class="button">Fellows</a></li>
                <li><a href="#" class="button">Contact us</a></li>
            </ul>
        </nav>
        <section>
            <div class="carousel"></div>
        </section>
        <section>
            <h2 class="fellows">Fellows wanted dead <small>(or alive if you want to eat them later)</small></h2>
        </section>
        <section class="wanted">
            <article></article>
            <article></article>
            <article></article>
        </section>
        <form>
            <h2>Contact us</h2>
            <input type="email" placeholder="@">
            <input type="text" placeholder="&#8962;">
            <select id="subject" name="subject">
                <option value="request">I have see one of them</option>
                <option value="request">I have many of them</option>
            </select>
            <textarea placeholder="Your message"></textarea>
            <div class="send-button">
                <button type="submit">Send !</button>
            </div>
        </form>
    <footer>
      <div>
        <a href="#">About Us</a>
        <a href="#">Fellows</a>
        <a href="#">Join our army</a>
      </div>
      <div>
        <a href="#">FAQ</a>
        <a href="#">Reward conditons</a>
        <a href="#">Legal mentions</a>
      </div>
      <div>
        <a href="#">Sauron4Ever.com</a>
        <a href="#">Follow him on twitter</a>
      </div>
    </footer>
    </body>
</html>


body{
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

h2{
    font-size:2 rem;
    text-align: center;
    vertical-align: baseline;
}

small{
    font-size: 1 rem;
}

.button:hover{
    background-color: #3E555E;
}


nav, footer{
    background-color: #333B3E;
}

nav ul {
    padding: 0px 15px 0px 15px;
    margin: 0;
    display: flex;
    align-items:baseline;
}

nav ul li{
    list-style-type: none;
    vertical-align: top;
    float: left;
    margin-right: 10px;
    height: 25px;
    line-height: 35px;
    color: #fff;
}

nav ul li:first-of-type {
    font-size: 25px;
    font-weight: bold;
    text-align: center;
}

nav ul li:nth-of-type(2) {
    background-color: #333B3E;
    color: grey;
    padding: 0px 0px 0px 0px;
}

.carousel{
    width: 100%;
    height: 300px;
    background-color: #3E555E;
}

.fellows{
        font-size: 2.4rem;
}


.button{
    text-decoration: none;
    color:#fff;
    font-size: 20px;
    width: 150px;
    height: 40px;
    display: block;
    text-align: center;
    margin-top: -15px;
    line-height: 40px;
}


.wanted{
    display: flex;
    text-align: center;
}

.wanted article{
    height: 400px;
    background-color: #3E555E;
    margin-top: 50px;
    margin-right: 20px;
    flex-grow: 1;
}

form{
    margin-top: 150px;
    border-top: solid 2px #3E555E;
    margin-left: 10px;
    margin-right: 10px;
    display: grid;
    padding-bottom: 25px;
}

form h2{
    text-align: left;
    margin-top: 15px;
}

form input, form textarea, form select{
    margin: 0 auto;
    margin-top: 20px;
    width: 90%;
}

form input, form textarea{
    border: solid 2px #3E555E;
}

form textarea{
    height: 150px;
    margin-bottom: 30px;
}

form .send-button {
    display: flex;
    flex-direction: row-reverse;
    margin-bottom: 50px;
}

form button {
    background-color: #aaaaaa;
    border: 1px solid #444;
    padding: 8px 15px;
    border-radius: 5px;
    margin: 0;
}

footer {
    margin-top: auto;
    padding: 15px 50px 15px 50px;
    display: flex;
}

footer a {
    margin: 5px;
    text-decoration: none;
    color: inherit;
    color: white;
}

footer div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    margin-right: 100px;
}

footer div:last-of-type {
    font-weight: bold;
    margin-left: auto;
}

@media only screen and (max-width: 961px) {
  footer {
    flex-direction: column;
    align-items: center;
  }

  footer div {
    margin: 0;
    align-items: center;
  }

  footer div:last-of-type {
    margin: 0;
  }

  form h2 {
    text-align: center;
  }

  .wanted {
    flex-direction: column;
    align-items: center;
  }

  .wanted article {
    width: 85%;
    height: 200px;
    margin-bottom: 10px;
  }
}