title: move div tag to the right through CSS
body: <p>I have 3 div tag that I aligned on the left and are floating left.
  The problem is above there is another content of <code>width: 80rem;</code> and I would like to kind of centre them.
  I tried so many combinations, but I am unable to let start the 1st picture aligned to the object above.</p>
  
  <p>CSS</p>
  
  <pre><code>.beachcontent{
  background-color: #FAFCE8;
  margin: auto;
  margin-bottom: 5px;
  border: 0.1rem solid black;
  padding: 0.2rem;
  width: 26.6rem;
  text-align: center;
  margin-left: 2.5px;
  margin-right: 2.5px;
  float: left;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="beachcontent"&gt;  &lt;!--starting div beachcontent--&gt;
  &lt;h4&gt;Sardinia&lt;/h4&gt;
  &lt;a href="sardinia.html"&gt;&lt;img src="images/sardinia.jpg" width="330" height="220" alt="Sardinia"&gt;&lt;/a&gt;
  &lt;/div&gt;                      &lt;!--ending div beachcontent--&gt;
  &lt;div class="beachcontent"&gt;  &lt;!--starting div beachcontent--&gt;
  &lt;h4&gt;Sicily&lt;/h4&gt;
  &lt;a href="sicily.html"&gt;&lt;img src="images/sicily.jpg" width="330" height="220" alt="Sicily"&gt;&lt;/a&gt;
  &lt;/div&gt;                      &lt;!--ending div beachcontent--&gt;
  &lt;div class="beachcontent"&gt;  &lt;!--starting div beachcontent--&gt;
  &lt;h4&gt;Elba&lt;/h4&gt;
  &lt;a href="elba.html"&gt;&lt;img src="images/elba.jpg" width="330" height="220" alt="Elba"&gt;&lt;/a&gt;
  &lt;/div&gt;                      &lt;!--ending div beachcontent--&gt;
  &lt;/main&gt;
  &lt;!--several br lines to display hr below beachcontent divs--&gt;
  &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  &lt;!--TO BE FIXED IF POSSIBLE--&gt;
  </code></pre>
  
  <p>another small issue is that I have to use several <code>&lt;br&gt;</code> lines to display <code>&lt;hr&gt;</code> below beachcontent divs, which is not really elegant. Is there a better way to fix this?
  Thanks in advance.</p>
  
  <p><a href="https://i.stack.imgur.com/W0JCA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W0JCA.png" alt="enter image description here"></a></p>