title: how to get Inline block to start on new line
body: <p>I have a group of inline blocks and I want after the 4th one for it to start on a new line. That's my project so far, kinda new to CSS so any helps is amaze thnx!</p>
  
  <p><a href="https://codepen.io/lumin-little/pen/poJpOMN" rel="nofollow noreferrer">https://codepen.io/lumin-little/pen/poJpOMN</a></p>
  
  <p><strong>HTML part</strong></p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="item-showcase"&gt;
      &lt;article class="showcase"&gt;
          &lt;div class="image"&gt;
            &lt;img src="https://images.unsplash.com/photo-1583803163205-847ab09b42fe?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80.jpg" id="puppo"&gt;
          &lt;/div&gt;
          &lt;h3&gt;Example text #1&lt;/h3&gt;
      &lt;/article&gt;
      &lt;div class="showcase"&gt;
          &lt;div class="image"&gt;
            &lt;img src="https://images.unsplash.com/photo-1583803163205-847ab09b42fe?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80.jpg" id="puppo"&gt;
          &lt;/div&gt;
          &lt;h3&gt;Example text #2&lt;/h3&gt;
      &lt;/div&gt;
      &lt;article class="showcase"&gt;
          &lt;div class="image"&gt;
            &lt;img src="https://images.unsplash.com/photo-1583803163205-847ab09b42fe?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80.jpg" id="puppo"&gt;
          &lt;/div&gt;
          &lt;h3&gt;Example text #3&lt;/h3&gt;
      &lt;/article&gt;
      &lt;article class="showcase"&gt;
          &lt;div class="image"&gt;
            &lt;img src="https://images.unsplash.com/photo-1583803163205-847ab09b42fe?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80.jpg" id="puppo"&gt;
          &lt;/div&gt;
          &lt;h3&gt;Example text #4&lt;/h3&gt;
      &lt;/article&gt;
      &lt;article class="showcase"&gt;
          &lt;div class="image"&gt;
            &lt;img src="https://images.unsplash.com/photo-1583803163205-847ab09b42fe?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80.jpg" id="puppo"&gt;
          &lt;/div&gt;
          &lt;h3&gt;Example text #5&lt;/h3&gt;
      &lt;/article&gt;
      &lt;article class="showcase"&gt;
          &lt;div class="image"&gt;
            &lt;img src="https://images.unsplash.com/photo-1583803163205-847ab09b42fe?ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80.jpg" id="puppo"&gt;
          &lt;/div&gt;
          &lt;h3&gt;Example text #6&lt;/h3&gt;
      &lt;/article&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS part</strong></p>
  
  <pre class="lang-css prettyprint-override"><code>.item-showcase
  {
    padding-top:50px;
    padding-left:100px;
  }
  
  .showcase
  {
    display:inline-block;
    background:red;
    padding:20px 20px 80px 20px;
  }
  
  #puppo
  {
    width:250px;
    height:200px;
    object-fit: cover;
  }
  
  .showcase:nth-child(4n) 
  {
    background:green;
  }
  
  </code></pre>
  
  <p>Thank you all and have a good night </p>