nth-child values and 2 col to 3 col - html

Question

I've searched for this problem, but can't find an answer.
I have a file where I have 1 column on "mobile" and 2 columns on "tablet" and I'd like 3 columns on "desktop", or anything larger than 1100px.
I've tried a bunch of different nth-child values. It works from 1 to 2, but not 2 to 3. I can't figure it out. Thanks!
/*Grid ------------------*/
/* Max out, center */
.image-grid {
max-width: 1600px;
margin: 0 auto;
padding: 0;
list-style: none;
}
.image-grid li {
float: left;
width: 47%;
margin: 1.5%;
text-align: center;
}
.image-grid p {
margin: 0;
padding: 2% 0 5% 0;
color: black;
font-size: 1.15rem;
font-weight: 400;
}
.image-grid:after {
content: "";
display: table;
clear: both;
}
.image-grid li:nth-child(odd) {
clear: both;
}
img {
max-width: 100%;
height: auto;
}
/*Breaks ------------------*/
#media (max-width: 640px) {
* {
margin: 0;
padding: 0;
}
.image-grid ul {
margin: 0;
padding: 0;
}
.image-grid li {
float: none;
width: auto;
padding: 0 0 4%;
}
.image-grid li a p {
font-size: 1.65rem;
}
}
#media (min-width: 1100px) {
body {
background: green;
}
.image-grid p {
font-size: 1.3rem;
}
.image-grid li {
float: left;
width: 31.3333%;
margin: 1.5%;
border: 1px solid white;
}
.image-grid li:nth-child(4) {
clear: right;
background: aqua;
}
.image-grid {
border: 1px solid yellow;
}
}
<div class="wrapper">
<div>
<ul class="image-grid">
<li>
<a href="http://jonschafer.com/portfolio/logos.html">
<img src="http://jonschafer.com/gfx/-main/gfx-main_0007_WHT_web_logos-06.jpg" alt="" />
<p>Logos
</p>
</a>
</li>
<li>
<a href="http://jonschafer.com/portfolio/akqa.html">
<img src="http://jonschafer.com/gfx/-main/gfx-main_0011_WHT_web_AKQA-MAIN.jpg" alt="" />
<p>AKQA
</p>
</a>
</li>
<li>
<a href="http://jonschafer.com/portfolio/nike2021.html">
<img src="http://jonschafer.com/gfx/-main/gfx-main_0004_WHT_web_Nike2021_8.jpg" alt="" />
<p>Nike 2021
</p>
</a>
</li>
<li>
<a href="http://jonschafer.com/portfolio/gimme5.html">
<img src="http://jonschafer.com/gfx/-main/gfx-main_0009_WHT_web_Gimme5-02.jpg" alt="" />
<p>Walnut's Gimme 5
</p>
</a>
</li>
<li>
<a href="http://jonschafer.com/portfolio/xbox.html">
<img src="http://jonschafer.com/gfx/-main/gfx-main_0000_WHT_web_Halo-03.jpg" alt="" />
<p>Xbox Master Chief Collection
</p>
</a>
</li>
<li>
<a href="http://jonschafer.com/portfolio/opolis.html">
<img src="http://jonschafer.com/gfx/-main/gfx-main_0003_WHT_web_Opolis-13.jpg" alt="" />
<p>Opolis Design
</p>
</a>
</li>
<li>
<a href="http://jonschafer.com/portfolio/votesolar.html">
<img src="http://jonschafer.com/gfx/-main/gfx-main_0002_WHT_web_VoteSolar-05.jpg" alt="" />
<p>Vote Solar
</p>
</a>
</li>
<li>
<a href="http://jonschafer.com/portfolio/nikeevents.html">
<img src="http://jonschafer.com/gfx/-main/gfx-main_0005_WHT_web_Nike-Sales-Rec_1_0.jpg" alt="" />
<p>Nike Sales Events
</p>
</a>
</li>
<li>
<a href="http://jonschafer.com/portfolio/classicben.html">
<img src="http://jonschafer.com/gfx/-main/gfx-main_0010_WHT_web_Classic-Ben-05.jpg" alt="" />
<p>Classic Ben
</p>
</a>
</li>
<li>
<a href="http://jonschafer.com/portfolio/medigap.html">
<img src="http://jonschafer.com/gfx/-main/gfx-main_0006_Medigap-N1_Who-is-AC.jpg" alt="" />
<p>AllCare Medigap
</p>
</a>
</li>
<li>
<a href="http://jonschafer.com/portfolio/levi.html">
<img src="http://jonschafer.com/gfx/-main/gfx-main_0008_WHT_web_Levi-06.jpg" alt="" />
<p>Levi
</p>
</a>
</li>
</ul>
<!-- End group -->
</div>
</div>
<!-- End wrapper -->

Answer 1

its because you never overwrote this rule:
.image-grid li:nth-child(odd) {
clear: both;
}
So the third item is clearing both sides.

Answer 2

Add/change the following properties within the 1100px media query:
#media (min-width: 1100px) {
.image-grid li {
margin: 1%;
box-sizing: border-box;
}
.image-grid li:nth-child(odd) {
clear: none;
}
}
The issues with your code are:
You have odd columns clearing, which isn't needed with a three column layout
Your margin is set to 1.5%. So the combined width of each li is 34.3333%, too wide to fit three on one row.
Each li has a 1px border, so even with 1% margins for 33.3333% total width, the 1px border will push the third item to the next line. box-sizing: border-box includes the border in the li's width, so the element is truly 33.3333% width.

Answer 3

This has worked for me :
#media (min-width: 1100px) {
/*keep all others*/
/**remove this one
.image-grid li:nth-child(2n+1) {
clear: both;
}
*/
/* modify this one*/
.image-grid li {
float: left;
width: 31.3333%;
margin: 1%; /* Change from 1.5% */
border: 1px solid white;
box-sizing: border-box; /*Added this line*/
}
Hope it helps T04435.