What I am trying to create, is a footer with the contact and social media underneath it with the copyright on the opposite side of the footer. Here is an image of what I'm trying to accomplish. 
If it looks like my code is incomplete, that is because I am coding the media query for the desktop version.
/*! HTML5 Boilerplate v6.1.0 | MIT License | https://html5boilerplate.com/ */
/*
* What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team.
*/
/* ==========================================================================
Base styles: opinionated defaults
========================================================================== */
html {
color: #222;
font-size: 1em;
line-height: 1.4;
}
/*
* Remove text-shadow in selection highlight:
* https://twitter.com/miketaylr/status/12228805301
*
* Vendor-prefixed and regular ::selection selectors cannot be combined:
* https://stackoverflow.com/a/16982510/7133471
*
* Customize the background color to match your design.
*/
::-moz-selection {
background: #b3d4fc;
text-shadow: none;
}
::selection {
background: #b3d4fc;
text-shadow: none;
}
/*
* A better looking default horizontal rule
*/
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid #ccc;
margin: 1em 0;
padding: 0;
}
/*
* Remove the gap between audio, canvas, iframes,
* images, videos and the bottom of their containers:
* https://github.com/h5bp/html5-boilerplate/issues/440
*/
audio,
canvas,
iframe,
img,
svg,
video {
vertical-align: middle;
}
/*
* Remove default fieldset styles.
*/
fieldset {
border: 0;
margin: 0;
padding: 0;
}
/*
* Allow only vertical resizing of textareas.
*/
textarea {
resize: vertical;
}
/* ==========================================================================
Browser Upgrade Prompt
========================================================================== */
.browserupgrade {
margin: 0.2em 0;
background: #ccc;
color: #000;
padding: 0.2em 0;
}
/* ==========================================================================
Author's custom styles
========================================================================== */
/* General Styles */
html {
font-size: 16px;
}
body {
font-size: 1em;
font-family: 'Myriad Pro';
color: #000000;
text-align: left;
}
ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}
a {
color: #ffffff;
text-decoration: none;
}
p {
font-size: .875em;
line-height: 1.285;
}
header figure a img {
width: 100%;
}
nav img {
width: 50px;
height: 50px;
}
.content-wrapper {
width: 100%;
}
/* -------------------- Base Header - Footer Styles -------------------- */
header, footer {
background-color: #e229a3;
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
}
header {
padding: 15px 0;
}
header .content-wrapper {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
}
header figure {
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
}
.header-divider {
background: #a8eb6c;
height: 3px;
width: 100%;
margin: 10px 0 20px 0;
}
header nav {
width: 50%;
font-size: 2.125em;
display: flex;
justify-content: space-around;
align-items: center;
flex-flow: row wrap;
}
header nav ul {
width: 100%;
display: flex;
justify-content: space-around;
}
header nav ul li {
font-size: 1.125em;
}
footer {
text-align: center;
flex-direction: column;
color: #ffffff;
}
footer p {
margin: 0;
}
footer .content-wrapper {
width: 15%;
margin: 10px 0;
}
footer .content-wrapper h4 {
font-family: 'Myriad pro';
font-size: 2.125em;
font-weight: lighter;
text-align: center;
}
footer .social-icons {
display: flex;
justify-content: space-between;
align-items: center;
}
footer .social-icons p {
background-color: #a8eb6c;
border-radius: 50%;
width: 70px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
}
footer .social-icons p i {
font-size: 2.125em;
}
.footer .social {
display: flex;
justify-content: space-between;
align-items: center;
}
footer .copyright {
margin: 20px 0;
font-size: 2.125em;
}
/* -------------------- Mobile Styles - Homepage -------------------- */
main .content-wrapper {
text-align: center;
align-items: center;
}
main h1 {
font-style: italic;
font-size: 50px;
text-align: center;
margin: 60px 0 60px 60px;
}
main figure img {
border: 10px solid #a8eb6c;
margin: 0 16px 0 0;
width: 500px;
height: 500px;
margin: 0 10px 0 10px;
}
main figure button {
background-color: #a8eb6c;
margin: 30px 0 30px 0;
align-items: center;
font-family: 'Myriad Pro';
font-size: 2.125em;
}
main figure figcaption {
margin: 30px 0 0 0;
align-items: center;
font-family: 'Myriad Pro';
font-size: 2em;
}
/* ==========================================================================
Helper classes
========================================================================== */
/*
* Hide visually and from screen readers
*/
.hidden {
display: none !important;
}
/*
* Hide only visually, but have it available for screen readers:
* https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
*
* 1. For long content, line feeds are not interpreted as spaces and small width
* causes content to wrap 1 word per line:
* https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
*/
.visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap; /* 1 */
}
/*
* Extends the .visuallyhidden class to allow the element
* to be focusable when navigated to via the keyboard:
* https://www.drupal.org/node/897638
*/
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto;
white-space: inherit;
}
/*
* Hide visually and from screen readers, but maintain layout
*/
.invisible {
visibility: hidden;
}
/*
* Clearfix: contain floats
*
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.clearfix:before,
.clearfix:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.clearfix:after {
clear: both;
}
/* ==========================================================================
EXAMPLE Media Queries for Responsive Design.
These examples override the primary ('mobile first') styles.
Modify as content requires.
========================================================================== */
@media only screen and (min-width: 1200px) {
/* General styles */
.content-wrapper {
max-width: 100%;
margin: 100px 0;
}
/* Header */
header {
justify-content: space-around;
height: 40%;
}
header .content-wrapper {
width: 100%;
justify-content: space-between;
}
header figure {
width: 40%;
float: left;
}
header nav {
width: 20%;
float: left;
padding: 60px;
font-size: 1.125em;
}
header nav ul {
justify-content: space-between;
padding-right: 60px;
}
.header-divider {
display: none;
}
/* Main */
main h1 {
font-style: italic;
font-size: 3.5em;
text-align: center;
margin: 60px 0 60px 0;
}
main figure {
text-align: center;
width: 30%;
float: left;
}
figure {
margin: 1em 20px;
}
main figure img {
border: 10px solid #a8eb6c;
width: 300px;
height: 300px;
}
main figure figcaption {
font-size: 1.125em;
}
main figure button {
background-color: #a8eb6c;
font-size: 1.125em;
font-family: 'Myriad pro';
}
footer {
background-color: #e229a3;
background-size: 50% 100%;
clear: both;
}
footer .content-wrapper {
width: 50%;
font-size: 1.125em;
display: inline-block;
float: left;
}
footer .content-wrapper h4 {
color: #000000;
font-size: 1.125em;
text-align: right;
padding-right: 150px;
}
footer a {
color: #000000;
text-decoration: none;
}
footer .social-icons {
padding: 0 150px 0 15px;
justify-content: flex-end;
margin:
}
footer .social-icons p {
width: 30px;
height: 30px;
margin: 0 0 0 10px;
}
footer .social-icons p i {
font-size: 1.125em;
}
footer .copyright {
font-size: 1.125em;
width: 50%;
text-align:left;
padding-left: 150px;
display: inline-block;
float: left;
}
}
@media print,
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 1.25dppx),
(min-resolution: 120dpi) {
/* Style adjustments for high resolution devices */
}
/* ==========================================================================
Print styles.
Inlined to avoid the additional HTTP request:
https://www.phpied.com/delay-loading-your-print-css/
========================================================================== */
@media print {
*,
*:before,
*:after {
background: transparent !important;
color: #000 !important; /* Black prints faster */
-webkit-box-shadow: none !important;
box-shadow: none !important;
text-shadow: none !important;
}
a,
a:visited {
text-decoration: underline;
}
a[href]:after {
content: " (" attr(href) ")";
}
abbr[title]:after {
content: " (" attr(title) ")";
}
/*
* Don't show links that are fragment identifiers,
* or use the `javascript:` pseudo protocol
*/
a[href^="#"]:after,
a[href^="javascript:"]:after {
content: "";
}
pre {
white-space: pre-wrap !important;
}
pre,
blockquote {
border: 1px solid #999;
page-break-inside: avoid;
}
/*
* Printing Tables:
* http://css-discuss.incutio.com/wiki/Printing_Tables
*/
thead {
display: table-header-group;
}
tr,
img {
page-break-inside: avoid;
}
p,
h2,
h3 {
orphans: 3;
widows: 3;
}
h2,
h3 {
page-break-after: avoid;
}
}<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Art Attack</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="about/index.html">
<link rel="stylesheet" href="contact/index.html">
<link rel="stylesheet" href="shopping/index.html">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
</head>
<body>
<header>
<div class="content-wrapper">
<figure>
<a href="index.html" role="link"><img src="img/logo.png" alt="art-attack-logo"></a>
</figure>
<div class="header-divider"></div>
<nav>
<ul>
<li><a href="contact/index.html" target="_blank" role="link">Contact</a></li>
<li><a href="about/index.html" target="_blank" role="link">About</a></li>
<li><a href="shopping/index.html" target="_blank" role="link"></a><img src="img/shopping-cart.png" alt="shopping-cart">
</nav>
</div>
</header>
<main>
<div class="content-wrapper">
<h1>"Creativity is the fuel for something amazing!"</h1>
<figure>
<img src="img/drawstring-bag.jpg" alt="drawstring-bag">
<figcaption>Purses • Tops • Skirts</figcaption>
<button role="button">Sensational Sewing</button>
</figure>
<figure>
<img src="img/charm-necklace.jpg" alt="icecream-necklace">
<figcaption>Earrings • Pendants • Clay Necklaces</figcaption>
<button role="button">Creative Charms</button>
</figure>
<figure>
<img src="img/phone-case.jpg" alt="phone-case">
<figcaption>Scarves • Mittens • Plushies</figcaption>
<button role="button">Knockout Knitting</button>
</figure>
</div>
</main>
<footer>
<div class="content-wrapper">
<h4>Contact</h4>
<div class="social-icons">
<p>
<a href="mailto:GracieArtAttack@gmail.com"><i class="fas fa-envelope"></i></a>
</p>
<p>
<a href="https://www.instagram.com/artsbygracie/?hl=en" target="_blank"><i class="fab fa-instagram"></i></a>
</p>
</div>
</div>
<div class="copyright">
<p>Copyright 2018 | Art Attacked</p>
</div>
</footer>
</body>
<html>screenshot:
