I know that we normally use \[code\]margin:auto\[/code\] however I am using the code below.HTML :\[code\]<article> <header></header></article>\[/code\]CSS:\[code\]article{ max-width: 500px; margin: auto; /* goes in the middle - great */}header{ width: 130%; margin-left: -30%;}\[/code\]DemoAt this point I am placing the \[code\]article\[/code\] in the center. However, as the browser/window size gets smaller, I would like to center the article as if its width was as wide as the \[code\]header\[/code\]. Basically, at some point (as you shrink the browser window) the \[code\]header\[/code\] will be at the edge on the left, whilst not taking advantage of the blank space on the right.I don't want to have an extra \[code\]div\[/code\], but if I did, I would wrap the article in a \[code\]div\[/code\] and give it an auto margin. 