When I enlarge this in firefox, the top photo is not centered and the bottom photo is oddly positioned.
I would avoid hardcoding pixel widths in the CSS. Using rem (relative em) is better for margins and padding I think. Font size can usually be better varied as a percentage of the base font size. (That should help out with accessibility and responsive design.) One of the key things with making things automatically adapt to different environments is using relative units whenever possible.
Bootstrap also has a block-center class that could come in handy, as well as push-left and push-right for floating images.
Code formatting wise, you ideally want the li’s starting their own lines.
But this is still pretty good if you’re brand new to HTML and CSS.
The ‘alt’ attribute is required for
<img class="col-xs-6 img-responsive" src="https://smugnotes.files.wordpress.com/2014/07/110818_burkard_64468.jpg">
I think “cold water photograper” is a heading element (and not
<h1>Chris Burkard</h1> <em>Cold Water Photographer</em>
The placement of stress emphasis changes the meaning of the sentence. The element thus forms an integral part of the content.
Cheers and happy coding