title: Need help to span <div> elements in one row
body: <p>I want exactly like this website: <a href="https://www.petzl.com/INT/en" rel="nofollow noreferrer">https://www.petzl.com/INT/en</a></p>
  <p>I want to show the text that is the center having 3 divs &quot;Services&quot; &quot;Training&quot; and &quot;Shop&quot; to have in one line or row.</p>
  <p>I tried inline-block, padding, margins, float etc. but maybe I am doing something wrong.</p>
  <p>If I dont use this line &quot;place-content:center;&quot; it places it to left with a lot of spaces.</p>
  <p>My website link: beta.edgerope.com</p>
  <p>Please find code below:</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-html lang-html prettyprint-override"><code>&lt;style&gt;
  
  .image{
     
    height: 800px;
    width: 100%;
    display: grid;
    place-content:center;
    justify-content:middle;
    color: white;
    font-size:30px;
    background-color: #;
    background-position: center;
    background-size: cover;
  }
  
  .training{
      display:inline-block;
    padding-top: 50px;
    padding-right: 1500px;
    padding-bottom: 50px;
    padding-left: 1px;
    
  }
    
   
  .image&gt;div {
    display: inline-block;
    width: 100px;
    
  }
  
  .image&gt;div img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
   z-index: 0;
   display: inline-block;
  }
  
  .image&gt;div span {
    position: relative;
    z-index: 1;
    cursor: pointer;
    display: inline-block;
  }
  
  .image&gt;div span:hover+img {
    opacity: 1;
    display: inline-block;
  }
  
  
  .div{
      dipslay
  }
  &lt;/style&gt;
  
  &lt;div class="image"&gt;
      
      &lt;div class="services"&gt;
       &lt;span class="services" onclick="window.location=''"&gt;Services&lt;/span&gt;
      &lt;img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"&gt; 
     
      &lt;/div&gt;
      
      
      
    &lt;div class="Training"&gt;
        &lt;span class="training" onclick="window.location='beta.edgerope.com/courses'"&gt;Training&lt;/span&gt;
      
      &lt;img src="https://beta.edgerope.com/wp-content/uploads/2022/08/1-1-1536x864.jpg"&gt; &lt;/div&gt;
      
    &lt;div class="shop"&gt;
       &lt;span class="shop" onclick="window.location='beta.edgerope.com/shop'"&gt;Shop&lt;/span&gt;
      &lt;img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"&gt; &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>:</p>