WCS Quest "08 - CSS : Flexbox"

***********************HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Find the precious!</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <nav>
            <ul>
                <li>FindThePrecious.com</li>
                <li>Fellows</li>
                <li>Contact us</li>
            </ul>
        </nav>
        <section id="first_pic">
        </section>
        <section>
            <div class="carousel"></div>
        </section>
        <section id="fellows">
             <h2>Fellows wanted dead <a>(or alive if you want to eat them later)</a></h2>
        </section>
        <section class="articles">
          <div>
            <article></article>
            <article></article>
            <article></article>
          </div>
        </section>
        <hr>
        <form id="contact">
            <h2>Contact us</h2>
            <ul>
              <li><input type="email" placeholder="@"></li>
              <li><input type="text" placeholder="&#8962;"></li>

              <li><label for="select-option"></label>
              <select name="options" id="select-option">
                <option value="option1">I have seen one of them</option>
                <option value="option2">Option 2</option>
                <option value="option3">Option 3</option>
              </select></li>

              <li><textarea placeholder="Your message" rows="6" cols="130"></textarea></li>
            </ul>
            <div class="button" >
              <button type="submit" form="contact" value="Submit">Send!</button>
            </div>
            <div class="clear"> </div>
        </form>
        <footer>
          <div id="footer-content">  <!-- Footer content -->
            <div id="col1">
              <div>About us</div>
              <div>Fellows</div>
              <div>Join our army</div>
            </div>
            <div id="col2">
              <div>FAQ</div>
              <div>Reward conditions</div>
              <div>Legal mentions</div>
            </div>
          </div>

          <div id="external-links">  <!-- External links -->
              <div>Sauron4Ever.com</div>
              <div>Follow him also on Twitter</div>
          </div>

        </footer>


    </body>
</html>


***********************CSS


* {
  margin: 5px;
  padding: 0;
}

 /* NAVIGATION FORMATTING */
 nav {
    	background-color: black ;
    	color: grey ;
    	margin-bottom: 0px;
    	padding: 0px;
  	}
nav ul {
  display: flex;
  flex-direction: row;
  justify-content: left;
}

 nav ul li {
    	display: flex ;
    	font-size: 1em ;
    	padding: .4em ;
      list-style: none;
      align-items: center;
 }
 nav li:first-child {
    	font-size: 2em ;
    	font-weight: bold;
 }
 nav li:nth-child(2) {
    	background-color: #C8C8C8 ;
 }
 #first_pic {
      	background-color: #E6E6E6 ;
      	margin-top: 0px ;
}


 /* ARTICLES FORMATTING */
 h2>a {                  /* text between parenthesis */
    	display: inline;
    	font-size: smaller;
    	font-weight: normal;
 }
 h2 {
    	font-size: 30px;
 }
 #fellows {
    	text-align: center;
 }
 .articles {
    	/* padding: 10px; */
    	text-align: center;
    	color: #E6E6E6 ;
    	margin-bottom: 5em;
 }

section div {
      display: flex;
      justify-content: space-between;
      width: 99%;

    }

 article {
    	display: flex;
    	background-color: #E6E6E6 ;
    	/* padding: 15px ; */
    	/* margin: 5px ; */
    	width: 25em;
    	height: 30em;
 }

 /* FORM FORMATTING */
form ul {
    	list-style-type: none;
    	text-align: center;
}
form ul li {
    	padding: 5px;
}
input {
    	size: 200px;
    	width: 85%;
}
select {
    	width: 85%;
}
textarea {
	width: 85% ;
}
.button {
  float: right;
  margin-right: 8%;
}

.clear {
  clear: both;
}

/* FOOTER FORMATTING*/
footer {
  margin: 0;
  background-color: #4A4F4E;
  color: #BDC9C7;
  padding-top: 1em;
  padding-bottom: 1em;
  padding-left: 2em;
  padding-right : 4em;
  display: flex;
  justify-content: space-between;

}

#footer-content {
  display: flex;

}

#footer-content div {
   display: flex;
   flex-direction: column;
 }

 #external-links {
   display: flex;
   flex-direction: column;
   font-weight: bold;
   justify-content: center;
 }


 footer div div {
   margin: .4em;
 }

/* DESKTOP STYLES */
@media only screen and (min-width: 961px) {

  #first_pic {
       	height: 300px;
}
} /*END DESKTOP STYLES*/


/* MOBILE STYLES */
@media only screen and (max-width: 961px) {

  #first_pic {
        height: 150px;
       	width: 99%;
       	margin-top: 0px ;
}
	.articles {
    display: flex ;
    flex-direction: column;
	}

  	article {
		display: flex ;
    flex-direction: column;
    margin-bottom: .4em;
    height: 5em;
    width: 99%
	}

	section ul {
		display: flex;
    flex-direction: column;
	}

	.carousel {
		display: flex ;
    width:99%;
	}
	form h2 {			/* Contact us" title centering. */
		text-align: center ;
	}


#footer-content {
  display: flex;
  flex-direction: column;
  align-content: center;
}

#external-links {
     font-weight: normal;
}

footer {
  display: flex;
  flex-direction: column;
  align-content: center;
}

footer div {
  margin: 0px;
  padding-top: 0px;
  padding-bottom: 0px;
  align-items: center;
  color: white;
  text-size: smaller;
}

h2 {
     font-size: 15px;
}
h2>p {                  /* text between parenthesis */
     display: inline;
     font-size: smaller;
     font-weight: normal;
}
nav {
     background-color: black ;
     color: white ;
   }

nav li:first-child {
       font-size: 1em ;
       font-weight: bold;
}
nav ul li {
      	display: flex ;
      	font-size: .5em ;
      	padding: .4em ;
        list-style: none;
        align-items: center;
}

nav li:nth-child(2) {
      	background-color: black ;
   }


 }  /* END MOBILE STYLE