title: Change a <div> width without affecting content with margin:auto
body: <p>I have been wrestling with this issue for a while and couldn't find a similar question:</p>
  
  <p>I am trying to change the width of a <code>&lt;div&gt;</code> without affecting its content, meaning I don't want the content to move or readjust in anyway. At the same time, I need the content to be centered in the page depending on the screen resolution.</p>
  
  <p>Everything works fine when I don't use <code>margin:0 auto;</code> in my CSS, but that is not the result I want since the content is not centered anymore.</p>
  
  <p>I am still learning CSS and if anyone could take a look at the Code Pen I created I'd appreciate it.</p>
  
  <p>Thanks</p>
  
  <p>========EDIT=========</p>
  
  <p>Please look at the codepen, this is what I am trying to achieve:
  When the width of the <code>&lt;div&gt;</code> is changed, the text should not change position or be readjusted in anyway. 
  This can be achieved by deleting <code>margin:0 auto;</code> from the CSS section: The text does not change position and it's cut short when the <code>&lt;div&gt;</code> width is changed. </p>
  
  <p>But I need <code>margin:0 auto;</code> to stay to make sure that the <code>&lt;div&gt;</code> content adapts to screen resolution.</p>
  
  <p>Hope this clarifies intent. </p>
  
  <p><a href="https://codepen.io/anon/pen/wNLajP" rel="nofollow noreferrer">Code Pen Here</a></p>