CSS the way Ben would do it

Roberta, there are a lot of changes here, so it might be easier to look at the [css file itself](https://github.com/mica-gd-430-kutil/roberta1021.github.io/blob/9b6cb4450135d4afcef8fd2cec01a19949bc534e/css/main.css).

You can also see it live at http://mica-gd-430-kutil.github.io/roberta1021.github.io/.

- - -

Here's the breakdown.

**I re-organized the file to match the following order:**

1. global 'helpers' like `box-sizing`
1. tag styling `<a>`, `<body>`, `<h4>`, etc.
1. Objects - re-usable elements, like `.nav` [read more from Nicole Sullivan](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/), who coined "object oriented css"
1. Page Styles - starting top ⇢ down, outside ⇢ in.

**Site Navigation**

I applied the styles that were split between `.nav` and `.site-nav` to `.site-nav` only, keeping `.nav` generic and re-usable. That way, if you wanted to add a navigation in the footer, you could easily do it using:
```
<div class="footer">
    <ul class="nav footer-nav">
       <li><a href="#">Link</a></li>
    </ul>
</div>
```
and you get `.nav`'s horizontal layout, and `.footer-nav` is available for styling.

- - -


You don't have to merge these changes, but I thought it would be helpful to see.