title: Centering 2 elements adjacent to each other in CSS/HTML
body: <p>I have two elements (map + description inside a box). When on a large screen, both elements appear on the same line, which is good. However, they stay on the left of the page and I would like them to sit in the middle.</p>
  
  <p><a href="https://jsfiddle.net/jbf0dcat/" rel="nofollow noreferrer">Here is a fiddle</a> of the 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-css lang-css prettyprint-override"><code>.map {
    float: left padding: 10px;
    width: 410px;
    border: 1px solid black;
    display: inline-block;
  }
  .map1 {
    float: right padding: 10px;
    width: 410px;
    border: 1px solid black;
    display: inline-block;
  }
  p {
    float: left;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="map"&gt;
    &lt;iframe src="https://ctrc00.carto.com/builder/e2f49f3c-b793-11e6-9ceb-0ef24382571b/embed" width="100%" height="540" frameborder="0" allowfullscreen="allowfullscreen"&gt;&lt;/iframe&gt;
    &lt;p&gt;&lt;i&gt;
      &lt;u&gt;Map 1: &lt;strong&gt;12,083 listings&lt;/strong&gt; (Sept.2016)&lt;/i&gt;
      &lt;/u&gt;
      &lt;h4&gt;&lt;span style="color: #FFA500;"&gt;&lt;strong&gt;Activity:&lt;/strong&gt;&lt;/span&gt;&lt;/h4&gt;
      &lt;br&gt;
      &lt;strong&gt;183&lt;/strong&gt; estimated nights/year
      &lt;br&gt;
      &lt;strong&gt;$127&lt;/strong&gt; price/night
      &lt;br&gt;
      &lt;strong&gt;50.2%&lt;/strong&gt; estimated occupancy
      &lt;br&gt;
      &lt;strong&gt;$1920&lt;/strong&gt; estimated income/month
      &lt;br&gt;
      &lt;h4&gt;&lt;span style="color: #FFA500;"&gt;&lt;strong&gt;Listing per Host:&lt;/strong&gt;&lt;/span&gt;&lt;/h4&gt;
      &lt;br&gt;
      &lt;strong&gt;38.2%&lt;/strong&gt; multi-listings
      &lt;br&gt;
      &lt;strong&gt;62.0%&lt;/strong&gt; single listings
      &lt;br&gt;
      &lt;br&gt;
      &lt;h4&gt;&lt;span style="color: #FFA500;"&gt;&lt;strong&gt;Room Type:&lt;/strong&gt;&lt;/span&gt;&lt;/h4&gt;
      &lt;br&gt;
      &lt;strong&gt;55.3%&lt;/strong&gt; entire homes/apartment
      &lt;br&gt;
      &lt;strong&gt;42.6%&lt;/strong&gt; private rooms
      &lt;br&gt;
      &lt;strong&gt;2.1%&lt;/strong&gt; shared rooms
      &lt;br&gt;
    &lt;/p&gt;
  &lt;/div&gt;
  &lt;p&gt;
    &lt;div class="map1"&gt;
      &lt;iframe src="https://ctrc00.carto.com/builder/221c9570-b794-11e6-ad89-0e8c56e2ffdb/embed" width="100%" height="540" frameborder="0" allowfullscreen="allowfullscreen"&gt;&lt;/iframe&gt;
      &lt;p&gt;&lt;i&gt;&lt;u&gt;Map 2: &lt;strong&gt;15,640 listings&lt;/strong&gt; (Sept.2016)&lt;/p&gt;&lt;/i&gt;
        &lt;/u&gt;
        &lt;h4&gt;&lt;span style="color: #FFA500;"&gt;&lt;span style="color: #FFA500;"&gt;&lt;strong&gt;Activity:&lt;/strong&gt;&lt;/span&gt;&lt;/h4&gt;
        &lt;br&gt;
        &lt;strong&gt;60&lt;/strong&gt; estimated nights/year
        &lt;br&gt;
        &lt;strong&gt;$196&lt;/strong&gt; price/night
        &lt;br&gt;
        &lt;strong&gt;16.3%&lt;/strong&gt; estimated occupancy
        &lt;br&gt;
        &lt;strong&gt;$759&lt;/strong&gt; estimated income/month
        &lt;br&gt;
        &lt;br&gt;
        &lt;h4&gt;&lt;span style="color: #FFA500;"&gt;&lt;strong&gt;Listing per Host:&lt;/strong&gt;&lt;/span&gt;&lt;/h4&gt;
        &lt;br&gt;
        &lt;strong&gt;28.5%&lt;/strong&gt; multi-listings
        &lt;br&gt;
        &lt;strong&gt;71.5%&lt;/strong&gt; single listings
        &lt;br&gt;
        &lt;br&gt;
        &lt;h4&gt;&lt;span style="color: #FFA500;"&gt;&lt;strong&gt;Room Type:&lt;/strong&gt;&lt;/span&gt;&lt;/h4&gt;
        &lt;br&gt;
        &lt;strong&gt;60.3%&lt;/strong&gt; entire homes/apartment
        &lt;br&gt;
        &lt;strong&gt;37.9%&lt;/strong&gt; private rooms
        &lt;br&gt;
        &lt;strong&gt;1.8%&lt;/strong&gt; shared rooms
        &lt;br&gt;
      &lt;/p&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Above and under, I have some simple text/paragraph that are in the middle.</p>