title: CSS Max-width 100% Responsive design
body: <p>In my general CSS styles,  I declare a <code>(max-width 100%)</code> rule for all images.</p>
  
  <p>This means my images will become flexible and scale with their container, but never go beyond their native size.</p>
  
  <p>When the screen reaches > 800px I use a media query to float the image right and the paragraph text left (image and paragraph are now side by side).</p>
  
  <p>However - When I float the image to the right, I reduce its size by 50%... I target the image and apply a CSS rule of <code>width: 50%;</code> </p>
  
  <p>However the image is still flexible... how does this work? I would assume the <code>width: 50%;</code> rule would override the <code>max-width: 100%;</code> rule?</p>
  
  <p>Does <code>width: 50%;</code> change the size of the image container? Therefore the <code>max-width: 100%;</code> rule still applies?</p>
  
  <p>I hope the above makes sense?</p>