section{/*default so unecessary
  flex: 0 0 auto;*/  
  margin: 2em 0; 
  padding: 1em;
}

.flexContainer{
  /* Flex*/
display: flex; 
flex-flow: column nowrap; 
justify-content:flex-start; 
align-items: stretch;
  /*align-items:stretch will keep the text chunks the same width; they will stay full-width of the flex container*/
  
  margin: auto;
    /*margin auto centers the flex container in the body for the wide screens*/
  max-width: 45em;
  /*Max-width will keep some white space to the sides on widescreens but will adjust to be full screen on smaller devices/screens*/
}


body{
/*Body Style*/
font-family: 'Georgia', serif;
width: 100vw; 
max-width: 100%; 
padding: 0; 
margin:0; 
box-sizing: border-box;  
min-height: 100vh; 
background: #1d1f20;
border: 20px double #343436; 
color:white;
}

section img{
  max-width:100%;
}

.sideBySide{
  display:flex;
  flex-flow: row wrap;
  justify-content: flex-start;
  align-items: center;
  
}
.sideBySide h2{flex: 1 0 100%;}
.sideBySide img{flex: 0 0 30em;}
.sideBySide p{
  flex: 1 1 10em; 
  margin-right: 2em;
  /*This margin-right is a bit of a hack here because it was an after-thought.  Plan ahead and give all of your elements that may become a flex item a little padding or margin so they don't get smushed together.*/
}

header, footer{
  background:#343436; 
  padding: 1em 3vw;
}

footer{
  display:flex; 
  flex-flow: row wrap; 
  justify-content: space-around; 
  align-items:center;
/*For the footer I decided to have the three lines spaced evenly horizontally.
  The row wrap will set them horizontally but once out of room will bump to the next line.
  The justify content space around will keep them evenly spaced apart from each other and the sides. Space-between would push the outside ones to the sides, which looks good for certain elements
  align-items center keeps them centered vertically, as the h3 is larger than the p.*/
}

footer h3, footer p{padding: 0.5em 1em;}