wilderwith/css flexbox

## css flexbox
<!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">
        <link href="https://fonts.googleapis.com/css?family=Big+Shoulders+Display&display=swap" rel="stylesheet">

    </head>
    <body>
        <nav>
            <ul>
                <li>
                    <p>FindThePrecious.com</p>
                </li>
                <li>
                    <a href="#fellows">Fellows</a>
                </li>
                <li>
                    <a href="#contact">Contact us</a>
                </li>
        </ul>
    </nav>
        <section>
            <div class="carousel">
                <article id="fellows"></article>
            </div>
        </section>
        <section id="wanted">
            <h2>Fellows wanted dead (or alive if you want to eat them later)</h2>
        </section>
        <section class="articles">
            <article></article>
            <article></article>
            <article></article>
        </section>
        <form id="contact">
            <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>
            <input type="submit" value="Send!" id="button">
        </form>
        <footer>
            <div id="1col">
                <a href="aboutus.html">About us</a>
                <a href="fellows.html">Fellow</a>
                <a href="joinOurArmy.html">Join our army</a>
            </div>
            <div id="2col">
                <a href="faq.html">FAQ</a>
                <a href="rewardConditions">Reward conditions</a>
                <a href="legalMentions">Legal mentions</a>
            </div>
            <div id="3col">
                <a href="sauron4ever.html">Sauron4ever.com</a>
                <a href="followHimAlsoOnTwitter">Follow him also on twitter</a>
            </div>
        </footer>
    </body>
</html>

## style.css
/* general */

p, h1, h2, h3, h4, h5 {
    font-family: 'Big Shoulders Display', cursive;
}

html {
    width: 95%;
    height: auto;
    margin: auto;}

/* menu */

nav {
    display: block;
    margin: 0px;
    height: 100px;
    background-color: black;
    color: white;
 }

nav ul {
    display: flex;
    width: 100%;
    align-items: center;
    list-style: none;
    justify-content: space-around;
    padding-left: 0px;
 }

nav ul li {
    display: flex;
    padding: 20px;
 }

nav a {
    text-decoration: none;
    color: white;
 }

nav a:hover {
    background-color: white;
}

 li:hover {
     color: red;
 }

 /* carousel */

 .link {
    text-decoration: none;
    color: #000;
 }

 .carousel {
     margin: 100px, auto;
 }

 #fellows {
    width: 100%;
    height: 300px;
    margin: auto;
 }

 /* text section */

 #wanted {
     width: 100%;
     text-align: center;
     margin-top: 100px;
 }

 /* articles section */

 .articles {
    margin-top : 100px;
    margin-bottom : 100px;
    display: flex;
     }

article {
    width : 30%;
    height: 350px;
    margin : 20px;
    background-color: grey;
}

/* contact section */

form {
    width: 70%;
    margin: 100px auto;
}

input, textarea, button {
    width: 100%;
    padding: 12px 20px;
    margin: 10px 10px;
    box-sizing: border-box;
    border-radius: 20px;
}

textarea {
    padding: 50px;
}


#button:hover {
  background-color: #6d506d;
  color: #fff;
}

/* footer */

footer {
    background-color: grey;
    padding: 50px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
}

div {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
}

div a {
    padding: 10px;
    color: white;
    text-decoration: none;
}

/* media queries */

@media (max-width: 961px) {

    #wanted {
      font-size: 26px;
    }

    #contactus {
        text-align: center;
    }

    articles {
        width: 100%
    }


    .articles {
        display: block;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: stretch;
        align-content: stretch;
    }

    article {
        width: 90%;
        align-items: center;
    }

    footer {
        display: block;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-content: stretch;
    }

    footer div {
        align-items: center;
    }

    .nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        align-content: center;
    }
}
	<!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">
	<link href="https://fonts.googleapis.com/css?family=Big+Shoulders+Display&display=swap" rel="stylesheet">

	</head>
	<body>
	<nav>
	<ul>
	<li>
	<p>FindThePrecious.com</p>
	</li>
	<li>
	<a href="#fellows">Fellows</a>
	</li>
	<li>
	<a href="#contact">Contact us</a>
	</li>
	</ul>
	</nav>
	<section>
	<div class="carousel">
	<article id="fellows"></article>
	</div>
	</section>
	<section id="wanted">
	<h2>Fellows wanted dead (or alive if you want to eat them later)</h2>
	</section>
	<section class="articles">
	<article></article>
	<article></article>
	<article></article>
	</section>
	<form id="contact">
	<h2 id="contactus">Contact us</h2>
	<input type="email" placeholder="@">
	<input type="text" placeholder="⌂">
	<input type="text" placeholder="I have seen one of them">
	<textarea placeholder="Your message"></textarea>
	<input type="submit" value="Send!" id="button">
	</form>
	<footer>
	<div id="1col">
	<a href="aboutus.html">About us</a>
	<a href="fellows.html">Fellow</a>
	<a href="joinOurArmy.html">Join our army</a>
	</div>
	<div id="2col">
	<a href="faq.html">FAQ</a>
	<a href="rewardConditions">Reward conditions</a>
	<a href="legalMentions">Legal mentions</a>
	</div>
	<div id="3col">
	<a href="sauron4ever.html">Sauron4ever.com</a>
	<a href="followHimAlsoOnTwitter">Follow him also on twitter</a>
	</div>
	</footer>
	</body>
	</html>
	/* general */

	p, h1, h2, h3, h4, h5 {
	font-family: 'Big Shoulders Display', cursive;
	}

	html {
	width: 95%;
	height: auto;
	margin: auto;}

	/* menu */

	nav {
	display: block;
	margin: 0px;
	height: 100px;
	background-color: black;
	color: white;
	}

	nav ul {
	display: flex;
	width: 100%;
	align-items: center;
	list-style: none;
	justify-content: space-around;
	padding-left: 0px;
	}

	nav ul li {
	display: flex;
	padding: 20px;
	}

	nav a {
	text-decoration: none;
	color: white;
	}

	nav a:hover {
	background-color: white;
	}

	li:hover {
	color: red;
	}

	/* carousel */

	.link {
	text-decoration: none;
	color: #000;
	}

	.carousel {
	margin: 100px, auto;
	}

	#fellows {
	width: 100%;
	height: 300px;
	margin: auto;
	}

	/* text section */

	#wanted {
	width: 100%;
	text-align: center;
	margin-top: 100px;
	}

	/* articles section */

	.articles {
	margin-top : 100px;
	margin-bottom : 100px;
	display: flex;
	}

	article {
	width : 30%;
	height: 350px;
	margin : 20px;
	background-color: grey;
	}

	/* contact section */

	form {
	width: 70%;
	margin: 100px auto;
	}

	input, textarea, button {
	width: 100%;
	padding: 12px 20px;
	margin: 10px 10px;
	box-sizing: border-box;
	border-radius: 20px;
	}

	textarea {
	padding: 50px;
	}


	#button:hover {
	background-color: #6d506d;
	color: #fff;
	}

	/* footer */

	footer {
	background-color: grey;
	padding: 50px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: center;
	align-items: center;
	}

	div {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	}

	div a {
	padding: 10px;
	color: white;
	text-decoration: none;
	}

	/* media queries */

	@media (max-width: 961px) {

	#wanted {
	font-size: 26px;
	}

	#contactus {
	text-align: center;
	}

	articles {
	width: 100%
	}


	.articles {
	display: block;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
	align-content: stretch;
	}

	article {
	width: 90%;
	align-items: center;
	}

	footer {
	display: block;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-content: stretch;
	}

	footer div {
	align-items: center;
	}

	.nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	align-content: center;
	}
	}