title: Making center a inline-block
body: <p>I am having a hard time centering a inline block. </p>
  
  <pre><code>.content {
      width: 85%;
      margin: 0 auto;
  }
  
  #main-wrapper {
      text-align: center;
      display: inline-block;
  }
  
  #main-column {
      width: 85%;
      margin: 0 auto;
  }
  
  #image {
      width: 150px !important;
      height: 150px !important;
  }
  </code></pre>
  
  <p><em>HTML</em></p>
  
  <pre><code>@foreach($estates as $estate)
      &lt;div id="main-wrapper"&gt;
           &lt;div id="main-column"&gt;
                 &lt;div class="sub-column"&gt;
                      &lt;img id="image" src="{{$estate-&gt;image}}"&gt;
                 &lt;/div&gt;
                 &lt;div class="sub-column"&gt;
                      Content
                 &lt;/div&gt;
                 &lt;div class="sub-column"&gt;
                      Buttons
                 &lt;/div&gt;
           &lt;/div&gt;
       &lt;/div&gt;
  @endforeach
  </code></pre>
  
  <p>I don't want to make center element's inside sub-columns image and text etc. Just want to make a center main-column. This is the image of the page<a href="https://i.stack.imgur.com/FeMJG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FeMJG.png" alt="enter image description here"></a></p>