Just starting out with coding and currently practicing display and positioning. I've created a webpage with multiple divs containing the same content, displayed in a vertical scroll order. Now, I'm looking to position these divs side by side in rows of 2 as I go down the page - 2 images next to each other with their respective information below them. I've attempted this several times but haven't quite mastered it yet. Can someone please provide guidance on the best approach? Do I need to utilize a grid system for this layout? Any help would be greatly appreciated, as this is where I'm struggling the most in my learning process. Here's my HTML and CSS code:
<!DOCTYPE html>
<html>
<head>
<link href="./stylesheet.css" type="text/css" rel="stylesheet">
<meta charset ="utf-8"/>
<link href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
</head>
<body>
<div id="container">
<nav class="banner">
<img src="./banner.jpg" alt="banner image of various Moto GP riders racing on track">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Contenders</a></li>
<li><a href="#">Manufacturers</a></li>
<li><a href="#">Tech Sec</a></li>
<li><a href="#">Calendar</a></li>
</ul>
</nav>
<div class="opening">
<h1>MotoGP World Championship Contenders</h1>
<p>Here are the top Moto GP riders that will be competing for the World Championship in 2018...</p>
</div>
<div class="motogp-contenders">
<div class="marquez">
<img class ="rider-image" src="./marquez.jpg" alt="photo of Marc Marquez">
<h2 class ="rider-name">Marc Marquez</h2>
<p class="rider-desc">Reigning 4-times Moto GP World Champion</p>
</div>
<div class="dovi">
<img class="rider-image" src="./dovi.jpg" alt="photo of Andrea Dovizioso">
<h2 class="rider-name">Andrea Dovizioso</h2>
<p class="rider-desc">So close in 2017!</p>
</div>
<div class="rossi">
<img class="rider-image" src="./rossi.jpg" alt="photo of Valentino Rossi">
<h2 class="rider-name">Valentino Rossi</h2>
<p class="rider-desc">Can he win another title before he retires?</p>
</div>
<div class="vinales">
<img class="rider-image" src="./vinales.jpg" alt="photo of Maverick Vinales">
<h2 class="rider-name">Maverick Vinales</h2>
<p class="rider-desc">Can he be fast at every round and win the championship?</p>
</div>
<div class="lorenzo">
<img class="rider-image" src="./lorenzo.jpg" alt="photo of Jorge Lorenzo">
<h2 class="rider-name">Jorge Lorenzo</h2>
<p class="rider-desc">JL got used to the Duke at the end of the 2017 season...will he be a title contender this year?</p>
</div>
<div class="pedrosa">
<img class ="rider-image" src="./pedrosa.jpg" alt="photo of Dani Pedrosa">
<h2 class="rider-name">Dani Pedrosa</h2>
<p class="rider-desc">The greatest rider never to win a world title?</p>
</div>
<div class="zarco">
<img class ="rider-image" src="./zarco.jpg" alt="photo of Johann Zarco">
<h2 class="rider-name">Johann Zarco</h2>
<p class="rider-desc">The dark horse?</p>
</div>
</div>
</div>
</body>
</html>
My CSS styling is as follows:
body {
font-family: "arial";
background-color: black;
margin: 0;
}
#container {
width: 1200px;
margin: auto;
}
.banner img {
width: 100%;
}
.banner ul {
text-align: center;
list-style: none;
}
.banner li {
display: inline-block;
font-size: 18px;
padding: 10px;
background-color: white;
border-radius: 3px;
margin: 0 10px;
}
.banner a{
text-decoration: none;
color: black;
}
.banner li:active {
position: relative;
top: 2px;
}
.opening h1 {
color: white;
text-align: center;
font-family: 'Indie Flower';
font-size: 45px;
}
.opening {
color: white;
text-align: center;
font-size: 18px;
margin-bottom: 40px;
}
.rider-image {
width: 35%;
height: 290px;
margin: auto;
display: block;
border-radius: 50px;
}
.rider-name {
color: white;
text-align: center;
font-family: 'Indie Flower'
}
.rider-desc {
color: white;
text-align: center;
font-size: 16px;
margin-bottom: 40px;
}