title: Negative margin on an image with a 100% width in CSS
body: <p>I have this (simplified) situation :</p>
  
  <pre><code>&lt;div class="page-content"&gt;
    &lt;p&gt;text&lt;/p&gt;
    &lt;p&gt;&lt;img src="" /&gt;&lt;/p&gt;
    &lt;p&gt;text&lt;/p&gt;
    &lt;!-- ... --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And :</p>
  
  <pre><code>.page-content {
    padding: 0 20px;
  }
  
  .page-content img {
    display: block;
    margin: 0 auto;
    max-width: 100%;
  }
  </code></pre>
  
  <p>This way, I always have a padding inside my <code>.page-content</code> div (which contains a lot more than what I have copied here). The images cannot take more than the width of the page, minus the padding.</p>
  
  <p>It works great on any screen size.</p>
  
  <p>Example :</p>
  
  <p><img src="https://i.stack.imgur.com/rOpWO.png" alt="enter image description here"></p>
  
  <p>However, I want to make the images full-width when on a phone screen (bypassing the parent 20px padding).</p>
  
  <p>i.e. :</p>
  
  <p><img src="https://i.stack.imgur.com/mvawp.png" alt="enter image description here"></p>
  
  <p>I could resolve my problem if the parent (the <code>&lt;p&gt;</code>) had a negative margin (<code>margin: 0 -20px;</code>), but the html file is generated by Jekyll from a markdown file, and I can't add classes in it.</p>
  
  <p>I can't find a a way to do this, apart from removing the padding of <code>.page-content</code> and setting it on each child. Which I would rather not do. </p>
  
  <p>I can't set a fixed width either because I want that to work on every screen size.</p>
  
  <p>Is there a way to select the parent in CSS ? Or another feature I'm unaware of ?</p>
  
  <p>Thanks.</p>