title: How to align cards to the center with the same size?
body: <p>I am trying to align to the center in Oracle Apex cards by using the static content. My issue is that the alignment is not correct and the card sizes are not equal.</p>
  
  <p>My HTML code:</p>
  
  <pre><code>&lt;head&gt;
      &lt;style&gt;
          .card {
              box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
              transition: 0.3s;
              width: 15%;
              float: left;
              margin-left: 10px;
          }
  
          .card:hover {
              box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
          }
  
          .container {
              padding: 12px 18px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;div class="card"&gt;&lt;img src="ex1" alt="ex1" style="width:100%"&gt;
      &lt;div class="container"&gt;
          &lt;h4&gt;
              &lt;p style="text-align:center;"&gt;
                  &lt;font size="2"&gt;
                     &lt;a href="ex1 website" target="_blank"&gt;
                          &lt;b&gt;ex1&lt;/b&gt;
                      &lt;/a&gt;
                  &lt;/font&gt;
              &lt;/p&gt;
          &lt;/h4&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="card"&gt;
      &lt;img src="ex2" alt="ex2" style="width:100%"/&gt;
      &lt;div class="container"&gt;
          &lt;h4&gt;
              &lt;p style="text-align:center;"&gt;
                  &lt;font size="2"&gt;
                      &lt;a href="ex2 website" target="_blank"&gt;
                          &lt;b&gt;ex2&lt;/b&gt;
                      &lt;/a&gt;
                  &lt;/font&gt;
              &lt;/p&gt;
          &lt;/h4&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Issue illustration:</p>
  
  <p><a href="https://i.stack.imgur.com/bflDC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bflDC.png" alt="result vs expected"></a></p>