css max width align center

1/* example of how to center an absolute (or relative) element that
2has a max-width, basically if max-width is used we have to calc
3how left the element should be, otherwise we just use a percent*/
4#popup {
5    box-sizing: border-box;
6    display: block;                                                
7    position: absolute;
8    max-width: 800px;                                                                 
9    width: 60%;
10    /*subtract 400 ie: 1/2 of 800*/
11    left:calc(50% - 400px);
12}
13    
14/*this is triggered if max width is not hit:ie popup is less than 800px*/
15/*here we know our width is 60% so we can just go left 20% to center*/
16/*1333 = 800/.6 */
17@media only screen and (max-width: 1333px) {
18    #popup {
19          left: 20%;
20    }
21}