Trying to arrange <LI> and feeling very stuck - html

Question

Problem: I have to arrange these LI in a very specific way. Here is the image:
but I can't seem to break the boxes up. I have tried Flexbox, ClearFix, etc... no luck.
Please look at the picture so you can see how I am suppose to make this look.
* {
box-sizing: border-box;
}
a {
color: #777777;
}
html, body {
height: 100%;
}
#wrap {
margin: 0 auto;
text-align: center;
width: 960px;
}
.contentBox {
margin: 0 auto;
width: 960px;
height: 80%;
background-color: #ffffff;
border: #dddddd;
border-style: solid;
border-width: .01em;
}
#firstName {
color: white;
margin: 0 auto;
background-color: #4aaaa5;
width: 300px;
height: 85px;
float: left;
font-family: Georgia, 'Times New Roman', Times, serif;
line-height: 250%;
text-align: center;
}
#menu {
color: #777777;
background-color: #ffffff;
width: 300px;
height: 85px;
font-family: Georgia, 'Times New Roman', Times, serif;
float: right;
display: flex;
justify-content: space-between;
align-items: center;
}
hr {
clear: both;
border-width: .03em;
border-bottom-style: solid;
margin: 0 auto;
width: 100%;
align-self: center;
border-color: #777777;
}
#backgroundTest {
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/swirl_pattern.png);
background-repeat: repeat;
padding: 70px;
height: calc(100% - 87px);
}
#portfolioWrap {
margin: 0 auto;
width: 960px;
background-color: #ffffff;
border: #dddddd;
border-style: solid;
border-width: .01em;
}
.contentHeading {
clear: both;
color: #4aaaa5;
margin: 15px 0 15px 15px;
}
.grayLine {
margin: 15px auto;
color: #777777;
width: 930px;
border-width: 1px;
align-self: center;
}
#footerBox {
margin-top: 50px;
width: 100%;
background-color: #666666;
height: 4rem;
border-top-style: solid;
border-top-color: #4aaaa5;
border-top-width: 10px;
align-self: center;
bottom: 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
#copyright {
text-align: center;
color: white;
overflow: hidden;
}
body {
margin: 0 auto;
}
#robImage {
width: 200px;
height: 200px;
float: left;
margin: 0px 15px 0px 15px;
}
p {
color: #777777;
text-align: left;
margin-left: 15px;
margin-right: 15px;
word-spacing: 3px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
}
#footerLine {
color: #4aaaa5;
}
#cr1 {
color: white;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
/* contact us page CSS */
#contentPadding {
background-image: url("https://lh3.googleusercontent.com/MtzMSUjbfaDQY8xgppp8r826LVuwgwCkTE9aMTfPdHC5OUWr5UcBB4ulo1O_mzdaC6MAkzeN9G_11dSYYZCNfUM1lZKQW9xOfO3gDmeGi9ZW8FysGaSUoRqUctnzDBxjPUu2CF7GbOVdn8WOQviSnopCBSrqraAm0CFro5iQSvor-a513LA2Q4eCi88oB5PIZmJxn_av7T0kHVngc5BNKykQJNR13g4kep_BcaN_YbTrqAZBYfMy2FdD0klkUoQbLshgItmWQ6gH-Q-Ef3gjC0kLbxJBF4nTJJAJ027dahF-Cv_scyWwDDSxS4nNqQ4vsdFahevNFQItM94j8938kSyzw-99t3Ss6K7jo4YmV8Q8ixY5CCuL7-syMcbz6bJ3AMOOth2qjon9IQqr0fao4jqLQaMLK0I2bE8PcTHNISWz95VFiWOYnCxo76YOoClTl4zCO8obfxbo9TKdClhyjxYZ6BmSosFxGhd59YPcmdFmRIO18Vei4PBUyKK8pTPLwixUuG9AEkpljz-A7URK5AZxbUT_VlWBdqZWPbf8kaiiX24eY10BP15A-57I1AeVEuNlV61OsC2xr43YSf3M8-xYb2k1wqsWIE0mocY-L8h_jb8RCISwHmSlwNWGEiVGMvFHpsktw0szLV0UzRydDma0S9tisXJfiQPRzWxFc4aRfyJ2PQmg=s400-no");
background-repeat: repeat;
padding: 70px;
height: 100%;
}
/* Style inputs with type="text", select elements and textareas */
input[type=text],
select,
textarea {
width: 100%;
/* Full width */
padding: 12px;
/* Some padding */
border: 1px solid #cccccc;
/* Gray border */
border-radius: 4px;
/* Rounded borders */
box-sizing: border-box;
/* Make sure that padding and width stays in place */
margin-top: 6px;
/* Add a top margin */
margin-bottom: 16px;
/* Bottom margin */
resize: vertical
/* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #4aaaa5;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #4aaaa5;
font-family: Arial, Helvetica, sans-serif;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
border-color: #cccccc;
background-color: #ffffff;
padding: 20px;
align-self: center;
font-family: Arial, Helvetica, sans-serif;
color: #777777;
}
/* start of portfolio css */
/*
#boxClass {
display: flex;
width: 540px;
height: 800px;
align-items: flex-start;
justify-content: space-between;
text-align: center; */
#boxTitleHangman {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/hangman.jpg);
}
#hangmanText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleTrivia {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/trivia.jpg);
}
#triviaText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRock {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rps.jpg);
}
#rockText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRpg {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rpg.jpg);
}
#rpgText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRutgers {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rutgers.jpg);
}
#rutgersText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
.portfolioTitle {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 100px;
right: 15px;
line-height: 40px;
}
#hangmanBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#triviaBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rockBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rpgBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rutgersBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Rob Connolly's Portfolio</title>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<!-- this div contains the header-->
<div id="wrap">
<header>
<!-- name in header-->
<h1 id="firstName">
Rob Connolly
</h1>
</header>
<!-- Header-->
<div id="menu">
<span>
About
</span>
<span>
Portfolio
</span>
<span>
Contact
</span>
</div>
</div>
<!-- clear fix cleard float-->
<hr id="clearfix">
<!-- background image-->
<div id="backgroundTest">
<!-- Wrap2 wraps portfolio content section-->
<div class="contentBox">
<!-- Portfolio Heading-->
<h2 class="contentHeading">
Portfolio
</h2>
<!-- gray line in about me section-->
<hr class="grayLine">
<!-- Portfolio Form-->
<ul id="boxList">
<li id="boxTitleHangman">
<p id="hangmanText">
Hangman
</p>
</li>
<li id="boxTitleTrivia">
<p id="triviaText">
Trivia
</p>
</li>
<li id="boxTitleRock">
<p id="rockText">
Rock
</p>
</li>
<li id="boxTitleRpg">
<p id="rpgText">
Rpg
</p>
</li>
<li id="boxTitleRutgers">
<p id="rutgersText">
Rutgers
</p>
</li>
</ul>
<!--
<div id="hangman">
<div id="hangmanBackground" style="background-image: url('assets/images/hangman.jpg');">
<p class="portfolioTitle">Hangman</p>
</div>
<div id="trivia">
<div id="triviaBackground" style="background-image: url('assets/images/trivia.jpg');">
<p class="portfolioTitle">Trivia Game</p>
</div>
<div id="rock">
<div id="rockBackground" style="background-image: url('assets/images/rps.jpg');">
<p class="portfolioTitle">Rock Paper Scissors</p>
</div>
</div>
<div id="row2">
<div id="rpg">
<div id="rpgBackground" style="background-image: url('assets/images/rpg.jpg');">
<p class="portfolioTitle">RPG Game</p>
</div>
<div id="rutgers">
<div id="rutgersBackground" style="background-image: url('assets/images/rutgers.jpg');">
<p class="portfolioTitle">Rutgers Info Widget</p>
</div>
</div>
</div>
</div>
</div>
</div> -->
<!-- Start of footer-->
<div id="footerBox">
<!-- Text for footer-->
<p id="cr1"> © Copyright</p>
</div>
</div>
</div>
</div>
</body>
</html>

Answer 1

Welcome to SO, Its simple use column-count: property on ul
Here is updated snippet.
* {
box-sizing: border-box;
}
a {
color: #777777;
}
html, body {
height: 100%;
}
#wrap {
margin: 0 auto;
text-align: center;
width: 960px;
}
.contentBox {
margin: 0 auto;
width: 960px;
height: 100vh;
background-color: #ffffff;
border: #dddddd;
border-style: solid;
border-width: .01em;
}
#firstName {
color: white;
margin: 0 auto;
background-color: #4aaaa5;
width: 300px;
height: 85px;
float: left;
font-family: Georgia, 'Times New Roman', Times, serif;
line-height: 250%;
text-align: center;
}
#menu {
color: #777777;
background-color: #ffffff;
width: 300px;
height: 85px;
font-family: Georgia, 'Times New Roman', Times, serif;
float: right;
display: flex;
justify-content: space-between;
align-items: center;
}
hr {
clear: both;
border-width: .03em;
border-bottom-style: solid;
margin: 0 auto;
width: 100%;
align-self: center;
border-color: #777777;
}
#backgroundTest {
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/swirl_pattern.png);
background-repeat: repeat;
padding: 70px;
height: 100vh;
}
#portfolioWrap {
margin: 0 auto;
width: 960px;
background-color: #ffffff;
border: #dddddd;
border-style: solid;
border-width: .01em;
}
.contentHeading {
clear: both;
color: #4aaaa5;
margin: 15px 0 15px 15px;
}
#boxList{
column-count: 2;
}
.grayLine {
margin: 15px auto;
color: #777777;
width: 930px;
border-width: 1px;
align-self: center;
}
#footerBox {
margin-top: 50px;
width: 100%;
background-color: #666666;
height: 4rem;
border-top-style: solid;
border-top-color: #4aaaa5;
border-top-width: 10px;
align-self: center;
bottom: 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
#copyright {
text-align: center;
color: white;
overflow: hidden;
}
body {
margin: 0 auto;
}
#robImage {
width: 200px;
height: 200px;
float: left;
margin: 0px 15px 0px 15px;
}
p {
color: #777777;
text-align: left;
margin-left: 15px;
margin-right: 15px;
word-spacing: 3px;
font-family: Arial, Helvetica, sans-serif;
line-height: 1.5;
}
#footerLine {
color: #4aaaa5;
}
#cr1 {
color: white;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
}
/* contact us page CSS */
#contentPadding {
background-image: url("https://lh3.googleusercontent.com/MtzMSUjbfaDQY8xgppp8r826LVuwgwCkTE9aMTfPdHC5OUWr5UcBB4ulo1O_mzdaC6MAkzeN9G_11dSYYZCNfUM1lZKQW9xOfO3gDmeGi9ZW8FysGaSUoRqUctnzDBxjPUu2CF7GbOVdn8WOQviSnopCBSrqraAm0CFro5iQSvor-a513LA2Q4eCi88oB5PIZmJxn_av7T0kHVngc5BNKykQJNR13g4kep_BcaN_YbTrqAZBYfMy2FdD0klkUoQbLshgItmWQ6gH-Q-Ef3gjC0kLbxJBF4nTJJAJ027dahF-Cv_scyWwDDSxS4nNqQ4vsdFahevNFQItM94j8938kSyzw-99t3Ss6K7jo4YmV8Q8ixY5CCuL7-syMcbz6bJ3AMOOth2qjon9IQqr0fao4jqLQaMLK0I2bE8PcTHNISWz95VFiWOYnCxo76YOoClTl4zCO8obfxbo9TKdClhyjxYZ6BmSosFxGhd59YPcmdFmRIO18Vei4PBUyKK8pTPLwixUuG9AEkpljz-A7URK5AZxbUT_VlWBdqZWPbf8kaiiX24eY10BP15A-57I1AeVEuNlV61OsC2xr43YSf3M8-xYb2k1wqsWIE0mocY-L8h_jb8RCISwHmSlwNWGEiVGMvFHpsktw0szLV0UzRydDma0S9tisXJfiQPRzWxFc4aRfyJ2PQmg=s400-no");
background-repeat: repeat;
padding: 70px;
height: 100%;
}
/* Style inputs with type="text", select elements and textareas */
input[type=text],
select,
textarea {
width: 100%;
/* Full width */
padding: 12px;
/* Some padding */
border: 1px solid #cccccc;
/* Gray border */
border-radius: 4px;
/* Rounded borders */
box-sizing: border-box;
/* Make sure that padding and width stays in place */
margin-top: 6px;
/* Add a top margin */
margin-bottom: 16px;
/* Bottom margin */
resize: vertical
/* Allow the user to vertically resize the textarea (not horizontally) */
}
/* Style the submit button with a specific background color etc */
input[type=submit] {
background-color: #4aaaa5;
color: white;
padding: 12px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-family: Arial, Helvetica, sans-serif;
}
/* When moving the mouse over the submit button, add a darker green color */
input[type=submit]:hover {
background-color: #4aaaa5;
font-family: Arial, Helvetica, sans-serif;
}
/* Add a background color and some padding around the form */
.container {
border-radius: 5px;
border-color: #cccccc;
background-color: #ffffff;
padding: 20px;
align-self: center;
font-family: Arial, Helvetica, sans-serif;
color: #777777;
}
/* start of portfolio css */
/*
#boxClass {
display: flex;
width: 540px;
height: 800px;
align-items: flex-start;
justify-content: space-between;
text-align: center; */
#boxTitleHangman {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/hangman.jpg);
}
#hangmanText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleTrivia {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/trivia.jpg);
}
#triviaText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRock {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rps.jpg);
}
#rockText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRpg {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rpg.jpg);
}
#rpgText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
#boxTitleRutgers {
list-style: none;
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
background-image: url(https://grobconnolly.github.io/myportfolio/assets/images/rutgers.jpg);
}
#rutgersText {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 80px;
right: 15px;
line-height: 40px;
}
.portfolioTitle {
background: #4aaaa5;
width: 200px;
height: 40px;
color: white;
text-align: center;
align-items: center;
position: relative;
top: 100px;
right: 15px;
line-height: 40px;
}
#hangmanBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#triviaBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rockBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rpgBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
#rutgersBackground {
height: 150px;
width: 200px;
margin: 10px 15px 30px 15px;
background-size: 100%;
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Rob Connolly's Portfolio</title>
<link rel="stylesheet" href="./assets/css/style.css">
</head>
<body>
<!-- this div contains the header-->
<div id="wrap">
<header>
<!-- name in header-->
<h1 id="firstName">
Rob Connolly
</h1>
</header>
<!-- Header-->
<div id="menu">
<span>
About
</span>
<span>
Portfolio
</span>
<span>
Contact
</span>
</div>
</div>
<!-- clear fix cleard float-->
<hr id="clearfix">
<!-- background image-->
<div id="backgroundTest">
<!-- Wrap2 wraps portfolio content section-->
<div class="contentBox">
<!-- Portfolio Heading-->
<h2 class="contentHeading">
Portfolio
</h2>
<!-- gray line in about me section-->
<hr class="grayLine">
<!-- Portfolio Form-->
<ul id="boxList">
<li id="boxTitleHangman">
<p id="hangmanText">
Hangman
</p>
</li>
<li id="boxTitleTrivia">
<p id="triviaText">
Trivia
</p>
</li>
<li id="boxTitleRock">
<p id="rockText">
Rock
</p>
</li>
<li id="boxTitleRpg">
<p id="rpgText">
Rpg
</p>
</li>
<li id="boxTitleRutgers">
<p id="rutgersText">
Rutgers
</p>
</li>
</ul>
<!--
<div id="hangman">
<div id="hangmanBackground" style="background-image: url('assets/images/hangman.jpg');">
<p class="portfolioTitle">Hangman</p>
</div>
<div id="trivia">
<div id="triviaBackground" style="background-image: url('assets/images/trivia.jpg');">
<p class="portfolioTitle">Trivia Game</p>
</div>
<div id="rock">
<div id="rockBackground" style="background-image: url('assets/images/rps.jpg');">
<p class="portfolioTitle">Rock Paper Scissors</p>
</div>
</div>
<div id="row2">
<div id="rpg">
<div id="rpgBackground" style="background-image: url('assets/images/rpg.jpg');">
<p class="portfolioTitle">RPG Game</p>
</div>
<div id="rutgers">
<div id="rutgersBackground" style="background-image: url('assets/images/rutgers.jpg');">
<p class="portfolioTitle">Rutgers Info Widget</p>
</div>
</div>
</div>
</div>
</div>
</div> -->
<!-- Start of footer-->
<div id="footerBox">
<!-- Text for footer-->
<p id="cr1"> © Copyright</p>
</div>
</div>
</div>
</div>
</body>
</html>

Answer 2

I would suggest you use the id you have given the <ul> tag i.e boxlist and then apply the display as flex this way all your li elements will be in a flex box.Then work with the <li> elements as flex box elements here is a link that could help you out:-
https://www.w3schools.com/css/css3_flexbox.asp
I would highly recommend you to use grid as it can be more usefull and I like it better than flex box,here is the link you can use to refer how a grid box is used:-
https://www.w3schools.com/css/css_grid.asp

Answer 3

Gridview
<ul class="gridview grid-3">
<li><p>Hello<br>Hello</p></li>
<li><p>Hello<br>Hello<br>Hello<br>Hello</p></li>
<li><p>Hello</p></li>
<li><p>Hello<br>Hello<br>Hello</p></li>
<li><p>Hello</p></li>
<li><p>Hello<br>Hello</p></li>
<li><p>Hello</p></li>
<li><p>Hello<br>Hello<br>Hello</p></li>
<li><p>Hello</p></li>
<li><p>Hello<br>Hello</p></li>
</ul>
ul.gridview > li {
display: block;
float: left;
padding: 0;
margin: 0;
}
ul.gridview > li p {
background: #ddd;
padding: 5px;
margin: 0;
}
/* Grid-3 */
ul.grid-3 > li {
width: calc(100% / 3 - 2 * 10px / 3);
}
ul.grid-3 > li:nth-child(n + 4) {
margin-top: 10px;
}
ul.grid-3 > li:nth-child(3n + 1) {
clear: left;
}
ul.grid-3 > li:not(:nth-child(3n + 1)) {
margin-left: 10px;
}
/* Grid-4 */
ul.grid-4 > li {
width: calc(100% / 4 - 3 * 10px / 4);
}
ul.grid-4 > li:nth-child(n + 5) {
margin-top: 10px;
}
ul.grid-4 > li:nth-child(4n + 1) {
clear: left;
}
ul.grid-4 > li:not(:nth-child(4n + 1)) {
margin-left: 10px;
}
Codepen