I keep running into an issue when lining up six images (2 images per row with text between both rows). For some reason, I cannot align them in the center and I could really use some tips before I lose my sanity. I want them to stay like the image attached even if the screen changes, can someone help? screenshot of my webpage
<!DOCTYPE html>
<html>
<div id="wrapper">
<title>HighItsKy</title>
<link href="test.css" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/redrock" rel="stylesheet">
<link href="http://fonts.cdnfonts.com/css/primer" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="backgroundcolor">
<h1>Community</h1>
<h2>One of the most remarkable things about my streaming experience is that I have grown a fantastic community and met some wonderful people;
the "Kyngdom" is where we build each other up, share memes, play games, and talk. We love and only want the best for each other here!</h2>
</div>
<div class="video-trailer">
<h1>GALLERY</h1>
<div class="fanartrow">
<div class="fanartcolumn">
<img src="fanart7.jpg" alt="Drawing of Ky wearing headphones and making a peace sign">
</div>
<div class="fanartcolumn">
<img src="fanart5.jpg" alt="Digital drawing of Ky looking surprised">
</div>
<h2>Left Image- Done by @Samzx_x on Twitch <br> Right Image- Done by @Vivkins on Twitch</h2>
</div>
<div class="fanartrow">
<div class="fanartcolumn">
<img src="fanart4.jpg" alt="Digital drawing of Ky as queen with Mama Ky">
</div>
<div class="fanartcolumn">
<img src="fanart1.jpg" alt="Digital drawing of Ky holding Minecraft weapons with fall guys characters, a monster from Alien Isolation, and her stepping
on a rocket league vehicle">
</div>
<h2>Both Images- Done by @This_Lettuce on Twitter</h2>
</div>
<div class="fanartrow">
<div class="fanartcolumn">
<img src="fanart2.jpg" alt="Digital drawing of Ky driving a green tractor over train tracks while a train is in the distance">
</div>
<div class="fanartcolumn">
<img src="fanart3.jpg" alt="Digital drawing of Ky with her viewers">
</div>
<h2>Left Image- Done by @This_Lettuce on Twitter <br> Right Image- Done by @Derpy_Pandaa on Twitch</h2>
</div>
</div>
</div>
.backgroundcolor{ /* To get that cream color background!*/
background-color: #f8f8f8;
}
.backgroundcolor h1, .backgroundcolor hr{
margin-bottom: 90px;
}
.backgroundcolor ul{
padding-bottom: 70px;
}
.backgroundcolor a
{
color: #987b74;
}
.video-trailer h1{
color: #987b74;
}
.video-trailer h2 a{
color: #987b74;
}
.video-trailer h2 a:hover{
color: #FACABC;
}
.video-trailer a{
color: #987b74;
}
.video-trailer{
background-image: radial-gradient(#f8f8f8, #FACABC, #f8f8f8);
margin-top: 170px;
}
/* Clear floats after image containers */
.fanartrow::after {
content: "";
clear: both;
display: table;
}
.fanartrow{
padding-left: 500px;
padding-right: 100px;
}
.fanartrow h2{
text-align: center;
padding-right: 600px;
padding-left: 200px;
font-size: 125%;
}
.fanartcolumn {
float: left;
width: 33.33%;
padding: 5px;
}
.fanartcolumn img{
display: inline-block;
margin-left: auto;
margin-right: auto;
width: 100%;
}
@media screen and (max-width: 640px)
{
body, html{
overflow-x: hidden;
padding: 0.8em 0;
width: 100vw;
}
.col-25, .col-75, input[type=submit] {
width: 100%;
margin-top: 0;
}
.tabs{
flex-direction: column;
align-items: center;
}
h2{font-size: 100%;}
.title{
font-size: 25%;
}
container {
height: 180px;
width: 100%;
display: flex;
align-items: center;
}
iframe{
width: 300px;
height: 200px;
margin-left: 50vw;
transform: translate(-50%);
}
.fanartcolumn img{
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}
}
@media (max-width: 1200px) {
.container nav{
width: 95%;
height: 76px;
}
.container nav ul li {font-size: 25px; width: fit-content; height: fit-content;}
.container nav ul li ul.sub-nav li{
font-size: 20px;
}
.container nav ul li:hover ul.sub-nav{ /* Drop down menu visibility */
padding-left: 10%;
padding-right: 40px;
}
main h2{
padding-right: 2em;
padding-left: 2em;
}
iframe{
width: 300px;
height: 200px;
margin-left: 50vw;
transform: translate(-75%);
}
.fanartcolumn img{
display: block;
margin-left: auto;
margin-right: auto;
width: 100%;
}
}