18.5.2 C-N-A Narrow Layout

On a smart phone, we want to keep our margins and padding to a minimum,
and we want to make each of our sections as wide as the device. We use
width: 100% and clear: both to achieve this.

• { box-sizing: border-box; margin: 0; padding: 0; }
  / default: phone CSS /
  #hdr { width: 100%; clear: both; }
  #cnt { width: 100%; clear: both; }
  #nav { width: 100%; clear: both; }
  #adv { width: 100%; clear: both; }
  #ftr { width: 100%; clear: both; }

18.5.3 CN-A Tablet Layout

On a tablet, we want the heading to span the whole device, but the content
and navigation to share the width of the screen.

@media (min-width: 360px) { / tablet overrides /
#hdr { width: 100%; clear: both; }
#cnt { width: 67%; float: left; }
#nav { width: 33%; float: right; }
#adv { width: 100%; clear: both; }
#ftr { width: 100%; clear: both; }
}

We have included several of these lines because we are covering all five divs
out of an abundance of caution. However, since they just repeat the CSS