title: Getting to the bottom of where an element's width/height comes from
body: <p>I see this all the time when examining my HTML in the Firefox DOM inspector.</p>
  <p><img src="https://i.stack.imgur.com/zvPb7.png" alt="width not matching" /></p>
  <p>The element's actual width (1170px in this case) doesn't match the <em>supposedly</em> selected rule (750px).  I figured out that this can be caused by a <code>max-width</code> rule, but in this case there is no <code>max-width</code>.  I assume there's a media query or some other weird rule somewhere that's responsible for this.  Is there any way, using the Firefox or Chrome or whatever dev console to get a summary of all the rules that affect an element's width/height in one place?</p>