Media Query for iPad Air

HTML & CSS
21

I would start by removing the link to the device specific styles.

Then I would change #wrapper as follows and rethink how I want the page to flow as the viewport becomes narrower.

#wrapper {
    border: 1px solid red;
    margin: 0 auto;
/*    min-width: 1250px;  /* DELETE Me */
/*    width: 1350px;  /* DELETE Me */
    max-width:1350px;  /* ADD Me */
}

 
The <header> is a block element. Block elements extend to the full width of the available space by default. I would delete {width:100%} from any blocks that have {width:100%} assigned unnecessarily.

Fixed heights are usually poor design as they do not change height as their contents change. You my want to specify a min-height rather than a fixed height, but in this case, I’d start with no height assigned.

header {
    border: solid 3px gray;
/*    width: 100%;  /* DELETE Me */
/*    min-height: 270px;  /* changed from {height:...} *//* DELETE Me */
}