title: How to center a left-aligned image on mobile?
body: <p>The image on my home page is left aligned.</p>
  
  <p>While <a href="https://i.stack.imgur.com/5HomV.jpg" rel="nofollow noreferrer">it looks great on desktop</a>, it <a href="https://i.stack.imgur.com/JepG7.jpg" rel="nofollow noreferrer">does not look good on mobile</a></p>
  
  <p>I am trying to "center" the image defined by <code>.entry-image.attachment-post.gsfc-alignleft</code> on mobile views.</p>
  
  <p>I have tried the following without success :</p>
  
  <pre><code>@media all and (max-width: 675px) {
  
  .entry-image.attachment-post.gsfc-alignleft {
  
     width: 100%!important;
     max-width: none;
     text-align: center;
     margin-left: auto!important;
     margin-right: auto!important;
    }
  }
  </code></pre>
  
  <p>My website is : parlons-survivalisme.com</p>
  
  <p>What am I missing ?</p>