

body {
  font-family: "Josefin Sans" sans-serif;
}

header {
   width: 100%; 
   background-color: #FBCD35;
   padding: 2em;
}

.column-2, .column-1 {
    width: 50%;
    height: 1050px;
}   

.column-1 {
    background-color: #61C7B2;
    float: left;  
}

.column-2 {
    background-color: #88ADA6;
    float: right;
}

footer {
    clear: both; 
    width: 100%;
    background-color: #A502AD;
    padding: 2em;
}

/*Overall, I felt pretty good about this challenge.  When I first glanced over it, and saw the finished product, I was like 'OMG this is going to take forever.'
Fortunately, we just had to do the basic layout, and that turned out to be a perfect opportunity to explore my understand of positioning and how that affects margins and padding.
I could not get the two columns to both float properly at 50% and take padding, and since they were floated elements, I couldn't use margins.  This finally led me to understand why a grid would be so useful.
Gutters allow you to float elements but still maintain a bit of space around them.  I also determined that I could hard-code values, but then I would have to put in media queries for it to be responsive.
You can do a lot with CSS but there are some tradeoffs.

Anyway, I'm feeling pretty good about CSS overall.  Even though I know I have a lot to learn still -especially troubleshooting positioning bugs, I'm not as intimidated as I used to be.  And overcoming that fear of
"screwing things up" allows me to more freely explore all my options.  Plus, using the Dev Tools saves a lot of time.  I just realized I need to work on a bigger monitor if I need all these windows open side by side.

Also, my guide showed me an awesome trick to toggle windows (Command tilda), which is going to save me SO MUCH TIME.


*/
Add CSS to my git recreation
Add CSS to my git recreation
