title: I need help sort my images properly in CSS, HTML
body: <p>I am new to web development and I am trying to make a website for sorting my pictures in CSS, HTML5. What I want the sorting to look like the text separates the images like a new paragraph.<a href="https://i.stack.imgur.com/U3JGG.jpg" rel="nofollow noreferrer">how it looks</a> I tried to add </p>
  
  <pre><code>&lt;br /&gt;
  </code></pre>
  
  <p>but that did not work as I expected. Thanks for any help I can get :)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#pics {
    margin-top: 10px;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .pics-text {
    font-family: 'Roboto', sans-serif;
    font-size: 36px;
    color: #ffffff;
    opacity: 87%;
  }
  
  .pic-item {
    float: left;
    position: relative;
    width: 20%;
    padding-top: 5px;
    padding-right: 7px;
  }
  
  .pic-item a img {
    width: 100%;
    border-radius: 5px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="pics"&gt;
  
    &lt;h2 class="pics-text"&gt;some text&lt;/h2&gt;
  
    &lt;div class="pic-item"&gt;
      &lt;a href="#"&gt;&lt;img src="./imgs/123-vertical/1.jpg" /&gt;&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="pic-item"&gt;
      &lt;a href="#"&gt;&lt;img src="./imgs/123-vertical/2.jpg" /&gt;&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="pic-item"&gt;
      &lt;a href="#"&gt;&lt;img src="./imgs/123-vertical/3.jpg" /&gt;&lt;/a&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;div id="pics"&gt;
  
    &lt;h2 class="pics-text"&gt;some text&lt;/h2&gt;
  
    &lt;div class="pic-item"&gt;
      &lt;a href="#"&gt;&lt;img src="./imgs/123-vertical/1.jpg" /&gt;&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="pic-item"&gt;
      &lt;a href="#"&gt;&lt;img src="./imgs/123-vertical/2.jpg" /&gt;&lt;/a&gt;
    &lt;/div&gt;
  
    &lt;div class="pic-item"&gt;
      &lt;a href="#"&gt;&lt;img src="./imgs/123-vertical/3.jpg" /&gt;&lt;/a&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>