wpid-6a0120a85dcdae970b012877705432970c-pi.jpg

My friend Piper put me on the correct path for my footer with the following code:

footer div { width: 32%; background: rgba(113,15,154,0.73); border: 1px solid rgba(255,255,255,0.00); display: inline-block; vertical-align: top; overflow-x: none; } footer div p { max-width: 100%; margin-left: 0; padding: 0; } footer div { width: 32%; background: rgba(113,15,154,0.73); border: 1px solid rgba(255,255,255,0.00); display: inline-block; vertical-align: top; overflow-x: none; } footer div p { max-width: 100%; margin-left: 0; padding: 0; }  But that left me with some janky (my new favorite word, apparently) formatting that I could not get rid of by myself. Stack Overflow to the rescue! So. I got four answers and tried three before I tried this: footer { background: rgba(113,15,154,0.73); } footer div { width: 32%; border: 1px solid rgba(255,255,255,0.00); display: inline-block; vertical-align: top; text-align: center; } footer div section { max-width: 100%; margin: auto; padding: 20px; text-align: center; } footer { background: rgba(113,15,154,0.73); } footer div { width: 32%; border: 1px solid rgba(255,255,255,0.00); display: inline-block; vertical-align: top; text-align: center; } footer div section { max-width: 100%; margin: auto; padding: 20px; text-align: center; }  And boom. Fixed…but not quite. There was an issue with the Font Awesome icons that I still can’t get right– the dribble icon was floating right of the footer. I decided to put the icons in a div id container and style it. That has worked– the icons are all at the bottom but no matter what I do, I can’t get them to float left. Here is the HTML:  <div id="container"> <a href="https://www.behance.net/twhite412photo"><i class="fa fa-behance-square fa-2x"></i></a> <a href="https://www.linkedin.com/in/tiffanyrwhite/"><i class="fa fa-linkedin-square fa-2x"></i></a> <a href="https://twitter.com/TiffanyW_412"><i class="fa fa-twitter-square fa-2x"></i></a> <a href="https://github.com/twhite96"><i class="fa fa-github fa-2x"></i></a> <a href="https://plus.google.com/+TiffanyWhiteWriter"><i class="fa fa-google-plus-square fa-2x"></i></a> </div>  <div id="container"> <a href="https://www.behance.net/twhite412photo"><i class="fa fa-behance-square fa-2x"></i></a> <a href="https://www.linkedin.com/in/tiffanyrwhite/"><i class="fa fa-linkedin-square fa-2x"></i></a> <a href="https://twitter.com/TiffanyW_412"><i class="fa fa-twitter-square fa-2x"></i></a> <a href="https://github.com/twhite96"><i class="fa fa-github fa-2x"></i></a> <a href="https://plus.google.com/+TiffanyWhiteWriter"><i class="fa fa-google-plus-square fa-2x"></i></a> </div>  And the CSS: footer div container{ float: left; } footer div container{ float: left; }  Sigh. It is almost 2 am in Pittsburgh and I have been messing with this for the past two days. It isn’t where I want it, regardless of the hinky CSS. I need JavaScript and JQuery to make it not just a static page. Maybe some CSS animations. Don’t know. Yesterday I thought, “this will be up in running in three months, tops, regardless of if I’m ready to freelance”. Today I’m back down to earth.

CSS and Stack Overflow