Css 08

<!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 class="police">
                <li>FindThePrecious.com</li>
                <li>Fellows</li>
                <li>Contact us</li>
            </ul>
        </nav>
        <section>
            <div class="carousel"></div>
        </section>
        <section>
            <h2>Fellows wanted dead (or alive if you want to eat them later)</h2>
        </section>
        <section class="articleSection">
            <article class="box">
                <img src="https://via.placeholder.com/300">
            </article>
            <article class="box">
                    <img src="https://via.placeholder.com/300">
            </article>
            <article class="box">
                    <img src="https://via.placeholder.com/300">
            </article>
        </section>
        <form>
            <h2 id="titre">Contact us</h2>
            <div id="conteneur">
            <input type="email" placeholder="@">
            <input type="text" placeholder="&#8962;">
           <input type="text" placeholder="I have seen one of them">
            <textarea placeholder="Your message"></textarea>
           </div>

           <div class="button">
                <button type="submit"> Send!
                </button>


           </div>

        </form>
        <footer class="footer">
            <div class="flex-container">
                <section class="footerLink">
                    <p>About us</p>
                    <p>Fellows</p>
                    <p>Contact us</p>
                </section>
                <section class="footerLink">
                    <p>FAQ</p>
                    <p>Reward conditions</p>
                    <p>Legal mentions</p>
                </section>
                <section class="footerLink">
                    <p class="s">Sauron4ever.com</p>
                    <p class="s word">Follow him</p>
                </section>
            </div>
        </footer>
    </body>

</html>


body {
  margin: 0;
  padding: 0;
}
ul{
    background-color: black;
    color: white;
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: sticky;
    border: 1px solid #e7e7e7;
  }

  li {
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    float: left;
    border-right: 1px solid #bbb;
    padding: 14px 16px;
    text-decoration: none;
  }

  li:hover{
    background-color: grey;
  }

  li:last-child {
    border-right: none;
  }
  .carousel{
    background-color: grey;
    height: 150px;
  }
  section {
    width: 100%;
  }
  .articleSection {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-flow: row wrap;
    align-content: center;
  }
  article.box {

    display: inline-block;
    justify-content: center space-around;
    flex-flow: row wrap;
    align-content: center;
    }

#conteneur{
width: 50%;
}
input {
width: 100%;
}

form{
position: relative;
width: 1240px;
margin: 0 auto;
}

input, textarea {
  width: 300px;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
}
.footer {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  margin: 0;
  padding: 0;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: black;
  color: white;
  text-align: center;
}

.button {

  margin-left: 370px;
  display: flex;
  padding: 5px;
  width:20% ;
  flex-direction: row-reverse;

}

@media (min-width: 200px) and (max-width: 960px) {
  body {
    max-width: 100vw;
  }
  .articleSection {
    width: 100%;
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-content: center;
    align-items: center;
    flex-wrap: wrap;
  }
  img {
    width: 100%;
  }

  .box{
    width: 100%;
    }

    ul.police{
      font-size: 10px;
    }
    form {
      max-width: 100%;
    }
    #conteneur {
      min-width: 90%;
      padding: 1em;
    }
}
@media screen and (min-width: 961px) {
  .flex-container{

    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 3em;
  }
  .s {
    font-weight: bold;
  }
  .word::after {
    content: " also on twitter";
  }
  .footerLink {
    width: 30%;
  }
}