Centering the IMG element in Navbar - html

Good days guys I would like to ask if how to center the image element in the navigation bar, I dint use ul element when I try to use absolute dint work as well.. what I want to make it happen is just like on the image that attached here. thanks
here's the code, by the use I used grid system here
body,
html {
padding: 0;
margin: 0;
height: 100%;
}
/* ########## Custome Design ######### */
.mainbox {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
/* margin: 10px 0; */
height: 100vh;
}
.box{
background-image: linear-gradient(to bottom,
rgba(93, 173, 226, 0.800),
rgba(93, 173, 226, 0.932) ),
url(/img/bg-picture.jpg);
background-size: cover;
background-position: left;
height: 100vh;
}
header {
grid-row: 1 / 2;
grid-column: 1 / -1;
/* background-color: #fff; */
}
.logo {
height: 65px;
width: 65px;
position: absolute;
margin: auto;
}
.firstNav {
text-align: center;
}
.firstNav > a {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
padding: 0 12px;
color: #fff;
}
.firstNav > a:hover {
background: #000;
}
<body>
<div class="mainbox box">
<header>
<nav>
<div class="firstNav">
Home
Blog
Portfolio
<img src="./img/logo.png" alt="logo" class="logo">
Progress
About
Contact
</div>
</nav>
</header>
</div>
</body>
When I tried to use the code above the result is just like below image I attached


I solved this using flexbox, replace the text-align:center; in .firstNav and add a display: flex;
.firstNav {
display: flex;
justify-content: center;
align-items: center;
}
Here you have a codepen if you want to checkit! Let me know if that helps!


You can do something like this:
body,
html {
padding: 0;
margin: 0;
height: 100%;
}
/* ########## Custome Design ######### */
.mainbox {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
/* margin: 10px 0; */
height: 100vh;
}
.box{
background-image: linear-gradient(to bottom,
rgba(93, 173, 226, 0.800),
rgba(93, 173, 226, 0.932) ),
url(/img/bg-picture.jpg);
background-size: cover;
background-position: left;
height: 100vh;
}
header {
grid-row: 1 / 2;
grid-column: 1 / -1;
/* background-color: #fff; */
}
#header ul li a.logo {
background: url("http://i48.tinypic.com/2mob6nb.png");
background-repeat:no-repeat;
height:140px;
display:block;
width:215px;
margin-top:-61px;
padding: 0;
}
.firstNav {
text-align: center;
}
.firstNav > a {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
padding: 0 12px;
color: #fff;
}
.firstNav > a:hover {
background: #000;
}
<body>
<div class="mainbox box">
<header>
<nav>
<div class="firstNav">
Home
Blog
Portfolio
<img alt="logo" class="logo">
Progress
About
Contact
</div>
</nav>
</header>
</div>
</body>


I would use a grid like this:
nav {
display: grid;
grid-template-columns: repeat(3, 1fr) auto repeat(3, 1fr)
}
nav > * {
text-align: center;
}
<body>
<div class="mainbox box">
<header>
<nav>
Home
Blog
Portfolio
<img src="./img/logo.png" alt="logo" class="logo">
Progress
About
Contact
</nav>
</header>
</div>
</body>
Note: your <div class="FirstNav"> is useless.


I would suggest using
.firstNav {
display: flex
justify-content: center
align-items: center
}
Full example:
body,
html {
padding: 0;
margin: 0;
height: 100%;
}
/* ########## Custome Design ######### */
.mainbox {
display: grid;
grid-template-columns: repeat(12, 1fr);
grid-template-rows: repeat(12, 1fr);
/* margin: 10px 0; */
height: 100vh;
}
.box{
background-image: linear-gradient(to bottom,
rgba(93, 173, 226, 0.800),
rgba(93, 173, 226, 0.932) ),
url(/img/bg-picture.jpg);
background-size: cover;
background-position: left;
height: 100vh;
}
header {
grid-row: 1 / 2;
grid-column: 1 / -1;
/* background-color: #fff; */
}
.logo {
height: 65px;
width: 65px;
}
.firstNav {
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.firstNav > a {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 14px;
text-transform: uppercase;
text-decoration: none;
padding: 0 12px;
color: #fff;
}
.firstNav > a:hover {
background: #000;
}
<div class="mainbox box">
<header>
<nav>
<div class="firstNav">
Home
Blog
Portfolio
<img src="https://placehold.it/50x50" alt="logo" class="logo">
Progress
About
Contact
</div>
</nav>
</header>
</div>

Related

How to cover the image the entire div box and how to set the icon next to the button

There's a challenge that i wanna solv to enhance on my front-end skills, but in this set of challenge i've been stuggling on trying to fit the image in the entire div box of its parent?!? Also i've been trying to set cart icon next to the icon and it's not going too well.
Here's the challenge that i need solve : -
As you can the image and icon is not really close to the picture above.
Here is the code :
* {
box-sizing: border-box;
margin: 0;
padding: 10px;
}
:root {
--font1: "Fraunces", sans-serif;
--font2: "Montserrat", sans-serif;
--fs-paragraph: 14px;
--fs-header1: 40px;
--primaryColor1: hsl(158, 36%, 37%);
--primaryColor2: hsl(30, 38%, 92%);
--neutralColor1: hsl(212, 21%, 14%);
--neutralColor2: hsl(228, 12%, 48%);
--neutralColor3: hsl(0, 0%, 100%);
}
body {
background-color: var(--primaryColor2);
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
display: flex;
flex-direction: row;
justify-content: space-around;
margin: auto;
background-color: var(--neutralColor3);
width: 600px;
height: 100%;
border-radius: 1.5em;
}
.img-box {
margin: 0;
padding: 0;
}
.img-box img {
width: 100%;
height: 100%;
}
.details {
display: flex;
flex-direction: column;
}
.details h2 {
font-family: var(--font2);
font-weight: normal;
letter-spacing: 2px;
text-transform: uppercase;
font-size: var(--fs-paragraph);
}
.brand-title p {
font-family: var(--font1);
font-size: var(--fs-header1);
font-weight: bolder;
}
.brand-desc {}
.brand-desc p {
font-family: var(--font2);
font-size: var(--fs-paragraph);
color: var(--neutralColor2);
line-height: 2em;
}
.prices {
display: flex;
align-items: center;
}
.prices h1 {
font-family: var(--font1);
color: var(--primaryColor1);
}
.prices h4 {
font-family: var(--font2);
color: var(--neutralColor2);
text-decoration: line-through;
}
.addcart {
display: flex;
justify-content: center;
align-items: center;
}
.addcart button {
background: url(/images/icon-cart.svg) no-repeat left center;
padding-left: 20px;
background-color: var(--primaryColor1);
font-family: var(--font2);
font-weight: 600;
}
button {
border: none;
border-radius: 0.5em;
color: var(--neutralColor3);
width: 100%;
height: 50px;
}
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz#9..144&family=Montserrat&family=Outfit&display=swap" rel="stylesheet" />
<div class="container">
<div class="img-box">
<img src="/images/image-product-desktop.jpg" alt="" />
</div>
<div class="details">
<div class="brand-title">
<h2>Perfume</h2>
<p>Gabrielle Essence Eau De Parfum</p>
</div>
<div class="brand-desc">
<p>
A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.
</p>
</div>
<div class="prices">
<h1>$149.99</h1>
<h4>$169.99</h4>
</div>
<div class="addcart">
<span class="icon"></span>
<button>Add to Cart</button>
</div>
</div>
</div>
<div class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a
>. Coded by yes.
</div>
I did try to change the size of the image but it doesnt show the result that i want, for the icon i've been playing the position but it does not goes next to text of a button.

I would suggest to use display: grid; in your .container. In the image that you say is your challenge, the image takes half of the container. You can achieve that by creating two <div> inside your container, and then:
.container {
display: grid;
grid-template-columns: 1fr 1fr;
/*More properties*/
}
This will set each div to span half of your container. Your first div should have:
.your-div{
background-image: url('your-image-path')
background-size: cover;
background-position: center;
}
That way you can achieve the left side of your challenge. I would need more information about your problem with the right side. Hope this helped!
*Note: This is just one way of doing this. If you have to strictly use flex, play around with its properties.

As suggested By #aleyo742, grid is here your friend, but you will also need to reset some of your paddings, object-fit can be use too.
* {
box-sizing: border-box;
margin: 0;
padding: 10px;
}
:root {
--font1: "Fraunces", sans-serif;
--font2: "Montserrat", sans-serif;
--fs-paragraph: 14px;
--fs-header1: 40px;
--primaryColor1: hsl(158, 36%, 37%);
--primaryColor2: hsl(30, 38%, 92%);
--neutralColor1: hsl(212, 21%, 14%);
--neutralColor2: hsl(228, 12%, 48%);
--neutralColor3: hsl(0, 0%, 100%);
}
body {
background-color: var(--primaryColor2);
display: flex;
flex-direction: column;
min-height: 100vh;
}
.container {
display: grid;
grid-template-columns: 1fr 1fr;
padding: 0;
overflow: hidden;
margin: auto;
background-color: var(--neutralColor3);
max-width: 600px;
border-radius: 1.5em;
}
/* here comes why grid is your handy friend */
#media(max-width: 600px) {
.container {
grid-template-columns: 1fr;
grid-template-rows: 250px auto;
}
}
.img-box {
margin: 0;
padding: 0;
}
.img-box img {
width: 100%;
height: 100%;
padding: 0;
object-fit: cover;
}
.details {
display: flex;
flex-direction: column;
}
.details h2 {
font-family: var(--font2);
font-weight: normal;
letter-spacing: 2px;
text-transform: uppercase;
font-size: var(--fs-paragraph);
}
.brand-title p {
font-family: var(--font1);
font-size: var(--fs-header1);
font-weight: bolder;
}
.brand-desc {}
.brand-desc p {
font-family: var(--font2);
font-size: var(--fs-paragraph);
color: var(--neutralColor2);
line-height: 2em;
}
.prices {
display: flex;
align-items: center;
}
.prices h1 {
font-family: var(--font1);
color: var(--primaryColor1);
}
.prices h4 {
font-family: var(--font2);
color: var(--neutralColor2);
text-decoration: line-through;
}
.addcart {
display: flex;
justify-content: center;
align-items: center;
}
.addcart button {
background: url(/images/icon-cart.svg) no-repeat left center;
padding-left: 20px;
background-color: var(--primaryColor1);
font-family: var(--font2);
font-weight: 600;
}
button {
border: none;
border-radius: 0.5em;
color: var(--neutralColor3);
width: 100%;
height: 50px;
}
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz#9..144&family=Montserrat&family=Outfit&display=swap" rel="stylesheet" />
<div class="container">
<div class="img-box">
<img src="https://i.stack.imgur.com/vloym.jpg" alt="" />
</div>
<div class="details">
<div class="brand-title">
<h2>Perfume</h2>
<p>Gabrielle Essence Eau De Parfum</p>
</div>
<div class="brand-desc">
<p>
A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.
</p>
</div>
<div class="prices">
<h1>$149.99</h1>
<h4>$169.99</h4>
</div>
<div class="addcart">
<span class="icon"></span>
<button>Add to Cart</button>
</div>
</div>
</div>
<div class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a
>. Coded by yes.
</div>

Why is align-items:center working incorrectly in safari?

my design looks correct in firefox or chrome but wrong in safari. I don't understand why this is so. If I remove the 'align-items:center' it looks correct but why? I don't have a mac device so I can't try fixing it.
If you want to see what the real website looks like, link here:https://earslanyunus-statspreviewcard.netlify.app
And all codes
#import url("https://fonts.googleapis.com/css2?family=Inter:wght#400;700&family=Lexend+Deca&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.soft-violet {
color: hsl(277, 64%, 61%);
}
.lexendDeca {
font-family: "Lexend Deca", "sans-serif";
font-weight: 400;
}
p,
a {
font-size: 15px;
}
html {
font-size: 62.5%;
}
body {
background-color: hsl(233, 47%, 7%);
font-family: "sans-serif", "Inter";
}
main {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 2rem;
flex-direction: column;
}
.card {
max-width: 120rem;
background-color: hsl(244, 38%, 16%);
border-radius: 10px;
display: -ms-grid;
display: grid;
-ms-grid-columns: 1fr 1fr;
grid-template-columns: 1fr 1fr;
overflow: hidden;
-webkit-box-align: center;
-ms-flex-align: center;
/*problem here*/
align-items: center;
}
.img-box {
height: 100%;
background-color: rgb(170, 92, 219);
background-image: url("stats-preview-card-component-main/images/image-header-desktop.jpg");
background-blend-mode: multiply;
background-size: cover;
}
.card-img {
width: 100%;
height: 100%;
opacity: 0.7;
}
.text-box {
padding: 7rem 9rem 7rem 7rem;
}
.title {
font-size: 4rem;
color: white;
}
.text-desc {
margin-top: 3rem;
color: hsla(0, 0%, 100%, 0.75);
line-height: 1.8;
font-size: 1.6rem;
}
.stat-box {
margin-top: 8rem;
display: -ms-grid;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.stats-num {
font-weight: 700;
color: white;
font-size: 2.5rem;
}
.stats-text {
font-size: 1.4rem;
color: hsla(0, 0%, 100%, 0.6);
margin-top: 0.2rem;
}
.footer,
.footer a {
font-size: 1.3rem;
color: white;
}
.footer a:link,
.footer a:visited {
color: white;
}
.footer a:hover,
.footer a:active {
color: hsl(277, 64%, 61%);
text-decoration: none;
}
.footer-box {
margin-top: 3rem;
}
#media all and (max-width: 59.6em) {
.text-box {
padding: 4rem 5rem 4rem 4rem;
}
}
#media all and (max-width: 50.7em) {
html {
font-size: 50%;
}
.card {
-ms-grid-columns: 1fr;
grid-template-columns: 1fr;
-ms-grid-rows: 1fr 2fr;
grid-template-rows: 1fr 2fr;
}
.img-box {
grid-row-start: 1;
}
.text-box {
padding: 3rem 5rem 3rem 3rem;
}
.stat-box {
grid-template-columns: 1fr;
grid-template-rows: repeat(3, 1fr);
justify-items: center;
row-gap: 2rem;
}
p {
text-align: center;
}
h1 {
text-align: center;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="shortcut icon" href="stats-preview-card-component-main/images/favicon-32x32.png" type="image/x-icon">
<title>Stats Preview Card</title>
</head>
<body>
<main>
<div class="card">
<div class="text-box">
<h1 class="title">Get <span class="soft-violet">insights</span> that help your business grow.</h1>
<p class="text-desc lexendDeca">Discover the benefits of data analytics and make better decisions regarding revenue, customer experience, and overall efficiency.</p>
<div class="stat-box">
<div class="">
<p class="stats-num">10k+</p>
<p class="stats-text lexendDeca">COMPANIES</p>
</div>
<div class="">
<p class="stats-num">314</p>
<p class="stats-text lexendDeca">TEMPLATES</p>
</div>
<div class="">
<p class="stats-num">12M+</p>
<p class="stats-text lexendDeca">QUERIES</p>
</div>
</div>
</div>
<div class="img-box">
<!-- <img class="card-img" src="stats-preview-card-component-main/images/image-header-desktop.jpg" alt=""> -->
</div>
</div>
<div class="footer-box">
<p class="footer text-align-center">Challenge by Frontend Mentor</p>
<p class="footer text-align-center">Coded by Yunus Emre Arslan</p>
</div>
</main>
</body>
</html>

To get the consistency between Chrome / Firefox and Safari :
Remove align-items: center; on the .card element
Remove height:100%; on .img-box element

How do I add a link (href) to the image

I want to make the image a link so that when you click on the image it takes you to the link.
I tried the anchor link but that doesn't work. Below is my HTML and CSS code.
.ideas-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
grid-gap: 2.5rem;
margin-bottom: 2rem;
}
.title-heading{
text-align: center;
text-transform: uppercase;
margin-bottom: 10rem;
color: rgba(0,0,0,.7);
background-color: white;
}
.title-heading h1{
font-family: 'Aldrich', sans-serif;
font-size: 2rem;
margin: .5rem 0 1rem;
text-align: center;
}
.title-heading p{
text-transform: none;
padding: 0 50px;
}
.idea-grid-item{
height: 50rem;
width: 50rem;
padding: 5rem;
color: white;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
z-index: 1;
}
.idea-grid-item{
content:"";
position: relative;
top: 0;
left: 0;
width: 100%;
height: 30rem;
background-image: linear-gradient(135deg, rgba(49,24,131,0.9) 0%, rgba(72,56,149,0.8) 100%);
z-index: -1;
}
.idea-grid-item p{
color: rgba(0, 0, 0, 0.7);
}
.idea-grid-item a{
float: right;
}
<div class="ideas-grid">
<!--Idea grid item 1-->
<div class="idea-grid-item number-1">
<p>
</p>
</div>

If you want the entire image to be a link, wrap it in an <a> element like this:
<a href="http://yoursite.com">
<img src="image.jpg" alt="">
</a>

<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<img src="image.jpg"/>
</body>
</html>

random padding around entire page? [duplicate]

This question already has answers here:
How wide is the default `<body>` margin?
(4 answers)
Closed 3 years ago.
I built a homepage for my portfolio and there seems to be a blank invisible square acting as a border. I've tried making many adjustments to css but nothing I do seems to be controlling this. I was under the impression is would be something to do with padding or margin but nothing seems to change it. Has anyone ever experienced this? I'm sure its a super simple fix.
Any idea how to remove and make full screen? Thank you for your help.
#import url('https://fonts.googleapis.com/css?family=Nunito:300,400,700');
body {
font-family: "Nunito", sans-serif;
background: #eff1f7;
}
.content {
grid-area: content;
background: url(images/shapes.png);
}
.sidebar {
grid-area: sidebar;
background: linear-gradient(to right, rgba(249,107,142,1),
rgba(218,103,230,1),
rgba(130,125,253,1));
justify-content: center;
}
.footer {
grid-area: footer;
background: white;
}
.container {
font-size: 1.5em;
width: 100%;
height: 100vh;
display: grid;
grid-template-areas:
"sidebar"
"content"
"footer";
grid-template-columns: 1fr;
grid-template-rows: 130px 800px 250px;
}
.content,
.sidebar,
.footer {
padding: 1em;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
text-align: center;
}
nav li {
list-style: none;
padding: 1em 0;
}
nav li a {
color: white;
font-weight: 700;
opacity: 0.6;
text-decoration: none;
transition: 0.3s;
}
nav li a:hover {
opacity: 1;
}
.hero {
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.hero img {
width: 200px;
margin-right: 50px;
}
.hero h1 {
font-size: 2em;
font-weight: 300;
color: #373d46;
}
.hero p {
font-weight: 300;
line-height: 1.8em;
color: #98a0ad;
}
.action-btn {
display: inline-block;
text-decoration: none;
color: white;
font-weight: 700;
background: #867bfb;
padding: 1em 2em;
border-radius: 40px;
margin: 1em 0;
transition: 0.3s;
}
.action-btn:hover {
box-shadow: 0 10px 50px rgba(188,197,216,1);
}
footer ul {
max-width: 640px;
margin: 2em auto;
padding: 0;
text-align: center;
display: flex;
flex-direction: row;
}
footer ul li {
list-style: none;
align-self: flex-end;
}
footer ul li a {
text-decoration: none;
color: #c1c6ce;
}
svg {
width: 40%;
}
footer p {
font-size: 0.8em;
}
#media (min-width: 1040px) {
.container {
grid-template-areas:
"sidebar content"
"sidebar footer";
grid-template-columns: 300px 1fr;
grid-template-rows: 1fr auto;
}
nav ul {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.sidebar {
background: linear-gradient(rgba(249,107,142,1),
rgba(218,103,230,1),
rgba(130,125,254,1));
padding-top: 3em;
}
.hero {
text-align: left;
margin: 2em auto;
}
.hero img {
width: 250px;
float: right;
}
.hero h1 {
font-size: 3em;
}
.hero p {
width: 60%;
}
footer ul {
max-width: 960px;
margin: 0 auto;
padding: 2em 0;
}
svg {
width: 20%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Matt Mullins Designs</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<link rel="stylesheet" href="normalize.css" type="text/css">
</head>
<body>
<div class="container">
<div class="sidebar">
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="content">
<section class="hero">
<img src="images/mm1.png"/>
<div class="hero-content">
<h1>Passionate<br>UX Designer</h1>
<p>Carlsbad, CA based designer who's worked with prominent startups as well as established businesses. I find the ability to prototype creative concepts plus code the initial template to be a huge advantage.</p>
<a class="action-btn" href="#">Hire me</a>
</div>
</section>
</div>
<div class="footer">
<footer>
<ul>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43.068 43.068"><defs><style>.a{fill:#b3b4b8;}</style></defs><path class="a" d="M0,21.534a21.1,21.1,0,0,1,2.886-10.81,21.381,21.381,0,0,1,7.838-7.838A21.094,21.094,0,0,1,21.534,0a21.094,21.094,0,0,1,10.81,2.886,21.38,21.38,0,0,1,7.838,7.838,21.094,21.094,0,0,1,2.886,10.81,21.094,21.094,0,0,1-2.886,10.81,21.38,21.38,0,0,1-7.838,7.838,21.094,21.094,0,0,1-10.81,2.886,21.094,21.094,0,0,1-10.81-2.886,21.381,21.381,0,0,1-7.838-7.838A21.1,21.1,0,0,1,0,21.534Zm3.575,0A17.365,17.365,0,0,0,8.1,33.377a24.646,24.646,0,0,1,6.546-7.709,21.41,21.41,0,0,1,8.743-4.608q-.646-1.507-1.249-2.713A52.328,52.328,0,0,1,6.116,20.715q-1.68,0-2.5-.043,0,.172-.022.431T3.575,21.534Zm.56-4.436q.948.086,2.8.086a47.266,47.266,0,0,0,13.652-1.938,43.609,43.609,0,0,0-7.192-9.69,17.484,17.484,0,0,0-5.836,4.78A18.387,18.387,0,0,0,4.134,17.1ZM10.552,35.7a17.6,17.6,0,0,0,17.313,2.584,63.239,63.239,0,0,0-3.359-14.255,18.368,18.368,0,0,0-7.989,4.35A24.43,24.43,0,0,0,10.552,35.7ZM17.141,4.178a45.767,45.767,0,0,1,7.02,9.776A21.449,21.449,0,0,0,32.99,7.709,17.458,17.458,0,0,0,21.534,3.575,16.531,16.531,0,0,0,17.141,4.178Zm8.57,12.834q.646,1.378,1.464,3.488,3.187-.3,6.934-.3,2.67,0,5.3.129A17.291,17.291,0,0,0,35.186,9.906Q32.387,14.083,25.711,17.012Zm2.541,6.5a61.816,61.816,0,0,1,2.972,13.093,17.969,17.969,0,0,0,5.556-5.642,17.4,17.4,0,0,0,2.584-7.451Q36.22,23.3,33.636,23.3,31.267,23.3,28.252,23.515Z" transform="translate(0)"/></svg></li>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63.104 39.265"><defs><style>.a{fill:#b3b4b8;}</style></defs><g transform="translate(0)"><path class="a" d="M56.988,86.8H41.176V82.876H56.989V86.8ZM30.65,102.909a10.383,10.383,0,0,1,1.53,5.752,11.455,11.455,0,0,1-1.744,6.265,10.864,10.864,0,0,1-2.778,3.084,10.733,10.733,0,0,1-4.431,1.971,27.4,27.4,0,0,1-5.544.531H0V81.247H18.963c4.78.078,8.168,1.463,10.169,4.182a9.991,9.991,0,0,1,1.8,6,8.74,8.74,0,0,1-1.815,5.781,9.257,9.257,0,0,1-2.99,2.234A8.718,8.718,0,0,1,30.65,102.909ZM9.055,96.727h8.309a7.873,7.873,0,0,0,4.151-.973A3.711,3.711,0,0,0,23.107,92.3,3.514,3.514,0,0,0,21,88.679a14.832,14.832,0,0,0-4.635-.614H9.055ZM23.907,108.1a4.211,4.211,0,0,0-2.5-4.206,9.839,9.839,0,0,0-3.926-.665H9.055v10.464h8.3A9.219,9.219,0,0,0,21.329,113C23.046,112.147,23.907,110.518,23.907,108.1Zm38.947-6.388A36.934,36.934,0,0,1,63.1,107.3H42.619q.169,4.24,2.939,5.934a7.4,7.4,0,0,0,4.054,1.056,5.711,5.711,0,0,0,5.591-3.22h7.506a9.142,9.142,0,0,1-2.724,5.083q-3.774,4.1-10.578,4.106a15.351,15.351,0,0,1-9.908-3.461q-4.282-3.469-4.288-11.267,0-7.319,3.87-11.213a13.564,13.564,0,0,1,10.062-3.9,16.036,16.036,0,0,1,6.614,1.315,11.39,11.39,0,0,1,4.855,4.165A13.882,13.882,0,0,1,62.854,101.712Zm-7.388.733A6.142,6.142,0,0,0,53.5,98a6.41,6.41,0,0,0-4.358-1.523,5.831,5.831,0,0,0-4.388,1.613,7.58,7.58,0,0,0-1.96,4.354H55.466Z" transform="translate(0 -81.247)"/></g></svg></li>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.414 48.937"><defs><style>.a{fill:#b3b4b8;}</style></defs><path class="a" d="M104.924,61.766V39.443h7.493l1.122-8.7h-8.615V25.189c0-2.519.7-4.235,4.312-4.235l4.607,0V13.171a61.74,61.74,0,0,0-6.713-.342c-6.642,0-11.189,4.054-11.189,11.5v6.416H88.428v8.7H95.94V61.766Z" transform="translate(-88.428 -12.829)"/></svg></li>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.332 40.173"><defs><style>.a{fill:#b3b4b8;stroke:#5da8dc;}.a,.b{stroke-width:0.5px;}.b{fill:#fff;stroke:#fff;}</style></defs><g transform="translate(0.25 0.25)"><path class="a" d="M32.628.009V0h2.29l.837.167a8.949,8.949,0,0,1,1.519.427,10.805,10.805,0,0,1,1.321.616,12.562,12.562,0,0,1,1.158.718,7.127,7.127,0,0,1,.925.766,1.282,1.282,0,0,0,1.264.211,16.9,16.9,0,0,0,1.849-.55Q44.781,2,45.75,1.563T46.93,1l.22-.132.009-.013L47.2.837l.044-.022.044-.022.044-.022.009-.013.013-.009L47.37.74l.009-.013.044-.013L47.467.7l-.009.066-.013.066L47.423.9,47.4.969l-.022.044-.022.044-.022.066a1.532,1.532,0,0,0-.044.176,7.388,7.388,0,0,1-.418.881,11.014,11.014,0,0,1-.991,1.563,7.686,7.686,0,0,1-1.066,1.2q-.476.41-.63.572a1.89,1.89,0,0,1-.374.308l-.22.145-.044.022L43.5,6.01l-.009.013-.013.009-.013.009-.009.013-.044.022-.044.022-.009.013-.013.009-.013.009-.009.013-.009.013-.013.009-.013.009-.009.013h.22l1.233-.264a22.063,22.063,0,0,0,2.356-.638l1.189-.4.132-.044.066-.022.044-.022.044-.022.044-.022.044-.022.088-.013.088-.009V4.8l-.022.009-.022.013-.009.013-.013.009-.013.009-.009.013-.009.013-.013.009-.013.009L48.7,4.91l-.009.013-.013.009-.022.044-.022.044-.013.009-.559.749a6.188,6.188,0,0,1-.594.749q-.044.013-.123.132a12.618,12.618,0,0,1-.933.982,22.163,22.163,0,0,1-1.682,1.528,2.085,2.085,0,0,0-.837,1.656q-.013.978-.1,2.21T43.46,15.7a31.76,31.76,0,0,1-.749,3.236,29.426,29.426,0,0,1-1.233,3.523,27.445,27.445,0,0,1-1.519,3.082q-.793,1.365-1.453,2.312t-1.343,1.783q-.682.837-1.726,1.885t-1.145,1.145q-.1.1-.863.722T31.8,34.645a18.845,18.845,0,0,1-1.594,1.044q-.727.418-1.753.956a20.849,20.849,0,0,1-2.21,1q-1.189.462-2.51.859a22.927,22.927,0,0,1-2.554.616q-1.233.22-2.8.374l-1.563.154v.022H13.958v-.022l-.374-.022q-.374-.022-.616-.044t-1.827-.242q-1.585-.22-2.488-.44t-2.686-.837A26.134,26.134,0,0,1,2.915,36.82q-1.264-.625-1.585-.793t-.713-.405l-.4-.242-.009-.013L.2,35.358l-.013-.009-.009-.013-.044-.022-.044-.022-.009-.013L.066,35.27l-.013-.009-.009-.013-.009-.013-.013-.009H0v-.088l.044.009.044.013.2.022q.2.022,1.079.066t1.871,0a19.689,19.689,0,0,0,2.026-.2,22.821,22.821,0,0,0,2.444-.528,18.056,18.056,0,0,0,2.589-.889q1.176-.52,1.673-.775a16.292,16.292,0,0,0,1.506-.933l1.013-.683.009-.013.013-.009.013-.009.009-.013.009-.013.013-.009.013-.009.009-.013.044-.013.044-.009.009-.044.013-.044.013-.009.009-.013L14.355,31l-.683-.044a6.619,6.619,0,0,1-1.035-.2,9.931,9.931,0,0,1-1.519-.528,11.71,11.71,0,0,1-1.585-.837,7.8,7.8,0,0,1-1.114-.806q-.339-.317-.881-.9a8.909,8.909,0,0,1-.933-1.2,10.8,10.8,0,0,1-.757-1.422l-.366-.8L5.46,24.2l-.022-.066-.013-.044-.009-.044.066.009.066.013.484.066a10.762,10.762,0,0,0,1.519.044,11.762,11.762,0,0,0,1.431-.088q.4-.066.484-.088l.088-.022.11-.022.11-.022.009-.013L9.8,23.91l.013-.009.009-.013-.088-.022-.088-.022-.088-.022L9.467,23.8l-.088-.022q-.088-.022-.308-.088t-1.189-.484a9.092,9.092,0,0,1-1.541-.815,10.644,10.644,0,0,1-1.092-.867A12.461,12.461,0,0,1,4.117,20.3a8.808,8.808,0,0,1-1.1-1.739,10.578,10.578,0,0,1-.727-1.893,10.222,10.222,0,0,1-.317-1.827l-.079-.925.044.009.044.013.044.022.044.022L2.114,14l.044.022.683.308a8.611,8.611,0,0,0,1.7.528q1.013.22,1.211.242l.2.022h.4l-.009-.013L6.319,15.1l-.013-.009L6.3,15.081l-.009-.013-.013-.009-.013-.009-.009-.013-.044-.022-.044-.022-.009-.013-.013-.009-.013-.009-.009-.013-.044-.022-.044-.022-.009-.013-.379-.282a5.775,5.775,0,0,1-.757-.718q-.4-.44-.793-.925a7.14,7.14,0,0,1-.7-1.035,12.544,12.544,0,0,1-.652-1.4,9.94,9.94,0,0,1-.515-1.7,9.7,9.7,0,0,1-.2-1.7A10.675,10.675,0,0,1,2.07,5.7a9.353,9.353,0,0,1,.264-1.343,10.465,10.465,0,0,1,.572-1.585l.374-.837L3.3,1.871l.022-.066L3.338,1.8l.009-.013.009-.013.013-.009.013.009.009.013L3.4,1.8l.013.009.013.009.009.013.009.013.013.009.022.044.022.044.013.009.009.013.594.66q.594.66,1.409,1.475a8.28,8.28,0,0,0,.9.845.645.645,0,0,1,.22.2,8.989,8.989,0,0,0,.881.779q.749.616,1.959,1.431t2.686,1.607a26.208,26.208,0,0,0,3.17,1.431q1.7.638,2.378.837t2.334.506q1.651.308,2.488.4t1.145.1l.308.009-.009-.066-.013-.066-.088-.55a10.347,10.347,0,0,1-.088-1.541,10.105,10.105,0,0,1,.154-1.827,10.825,10.825,0,0,1,.462-1.7,9.056,9.056,0,0,1,.6-1.378A13.558,13.558,0,0,1,25.8,3.941a9.495,9.495,0,0,1,1.255-1.365,9.26,9.26,0,0,1,1.761-1.255A11.45,11.45,0,0,1,30.647.484,8.515,8.515,0,0,1,32.056.11a4.9,4.9,0,0,0,.572-.1Z"/><path class="b" d="M0,17.569V0H32.628V.009a4.909,4.909,0,0,1-.572.1,8.515,8.515,0,0,0-1.409.374,11.45,11.45,0,0,0-1.827.837,9.26,9.26,0,0,0-1.761,1.255A9.495,9.495,0,0,0,25.8,3.941a13.558,13.558,0,0,0-.784,1.176,9.056,9.056,0,0,0-.6,1.378,10.825,10.825,0,0,0-.462,1.7,10.105,10.105,0,0,0-.154,1.827,10.347,10.347,0,0,0,.088,1.541l.088.55.013.066.009.066-.308-.009q-.308-.013-1.145-.1t-2.488-.4q-1.651-.308-2.334-.506t-2.378-.837a26.208,26.208,0,0,1-3.17-1.431Q10.7,8.168,9.489,7.353T7.53,5.922a8.989,8.989,0,0,1-.881-.779.646.646,0,0,0-.22-.2,8.28,8.28,0,0,1-.9-.845Q4.712,3.28,4.117,2.62l-.594-.66-.009-.013L3.5,1.937l-.022-.044-.022-.044-.013-.009-.009-.013-.009-.013-.013-.009L3.4,1.8l-.009-.013L3.382,1.77l-.013-.009-.013.009-.009.013L3.338,1.8l-.013.009L3.3,1.871l-.022.066-.374.837a10.465,10.465,0,0,0-.572,1.585A9.353,9.353,0,0,0,2.07,5.7a10.675,10.675,0,0,0-.044,1.431,9.7,9.7,0,0,0,.2,1.7,9.94,9.94,0,0,0,.515,1.7,12.548,12.548,0,0,0,.652,1.4,7.14,7.14,0,0,0,.7,1.035q.4.484.793.925a5.775,5.775,0,0,0,.757.718l.379.282.009.013.044.022.044.022.009.013.013.009.013.009.009.013.044.022.044.022.009.013.013.009.013.009.009.013.009.013.013.009.013.009.009.013h-.4l-.2-.022q-.2-.022-1.211-.242a8.611,8.611,0,0,1-1.7-.528l-.683-.308L2.114,14,2.07,13.98l-.044-.022-.044-.022-.044-.013-.044-.009.079.925a10.222,10.222,0,0,0,.317,1.827,10.578,10.578,0,0,0,.727,1.893,8.808,8.808,0,0,0,1.1,1.739,12.461,12.461,0,0,0,1.132,1.224,10.643,10.643,0,0,0,1.092.867,9.092,9.092,0,0,0,1.541.815q.969.418,1.189.484t.308.088l.088.022.088.022.088.022.088.022.088.022-.009.013L9.8,23.91l-.013.009-.009.013-.11.022-.11.022L9.467,24q-.088.022-.484.088a11.762,11.762,0,0,1-1.431.088,10.762,10.762,0,0,1-1.519-.044l-.484-.066-.066-.013-.066-.009.009.044.013.044.022.066.022.066.366.8A10.8,10.8,0,0,0,6.6,26.486a8.909,8.909,0,0,0,.933,1.2q.542.581.881.9a7.8,7.8,0,0,0,1.114.806,11.71,11.71,0,0,0,1.585.837,9.931,9.931,0,0,0,1.519.528,6.619,6.619,0,0,0,1.035.2l.683.044.352.022-.009.013-.013.009-.013.044-.009.044-.044.009-.044.013-.009.013-.013.009-.013.009-.009.013-.009.013-.013.009-.013.009-.009.013-1.013.683a16.292,16.292,0,0,1-1.506.933q-.5.255-1.673.775a18.056,18.056,0,0,1-2.589.889,22.821,22.821,0,0,1-2.444.528,19.689,19.689,0,0,1-2.026.2q-.991.044-1.871,0T.286,35.182l-.2-.022-.044-.013L0,35.138ZM48.779,4.835l.009-.013.022-.013.022-.009V39.673H16.82v-.022l1.563-.154q1.563-.154,2.8-.374a22.927,22.927,0,0,0,2.554-.616q1.321-.4,2.51-.859a20.849,20.849,0,0,0,2.21-1q1.026-.537,1.753-.956A18.845,18.845,0,0,0,31.8,34.645q.872-.63,1.629-1.259t.863-.722q.1-.1,1.145-1.145t1.726-1.885q.683-.837,1.343-1.783t1.453-2.312a27.445,27.445,0,0,0,1.519-3.082,29.426,29.426,0,0,0,1.233-3.523A31.76,31.76,0,0,0,43.46,15.7q.242-1.431.33-2.664t.1-2.21a2.085,2.085,0,0,1,.837-1.656A22.162,22.162,0,0,0,46.41,7.64a12.616,12.616,0,0,0,.933-.982q.079-.119.123-.132a6.188,6.188,0,0,0,.594-.749l.559-.749.013-.009.022-.044.022-.044.013-.009L48.7,4.91l.009-.013.013-.009.013-.009.009-.013.009-.013.013-.009.013-.009ZM35.755.167,34.918,0H48.832V4.712l-.088.009-.088.013-.044.022-.044.022-.044.022-.044.022-.066.022-.132.044-1.189.4a22.063,22.063,0,0,1-2.356.638L43.5,6.187h-.22l.009-.013.013-.009.013-.009.009-.013.009-.013.013-.009.013-.009.009-.013.044-.022.044-.022.009-.013.013-.009.013-.009L43.5,6.01l.044-.022.044-.022.22-.145a1.89,1.89,0,0,0,.374-.308q.154-.163.63-.572a7.694,7.694,0,0,0,1.066-1.2,11.014,11.014,0,0,0,.991-1.563,7.388,7.388,0,0,0,.418-.881,1.532,1.532,0,0,1,.044-.176l.022-.066.022-.044L47.4.969,47.423.9l.022-.066.013-.066L47.467.7l-.044.009-.044.013L47.37.74l-.013.009-.013.009-.009.013-.044.022-.044.022L47.2.837l-.044.022L47.15.872,46.93,1q-.211.119-1.18.559t-1.959.793a16.9,16.9,0,0,1-1.849.55,1.282,1.282,0,0,1-1.264-.211,7.12,7.12,0,0,0-.925-.766,12.571,12.571,0,0,0-1.158-.718A10.805,10.805,0,0,0,37.274.594,8.949,8.949,0,0,0,35.755.167ZM0,37.45V35.226H.022l.013.009.009.013.009.013.013.009.013.009.009.013.044.022.044.022.009.013.013.009.013.009.009.013.4.242q.4.242.713.405t1.585.793a26.134,26.134,0,0,0,3.051,1.246q1.783.616,2.686.837t2.488.44q1.585.22,1.827.242t.616.044l.374.022v.022H0Z"/></g></svg></li>
</ul>
</footer>
</div>
</div>
</body>
</html>

Add a margin: 0 to your body:
#import url('https://fonts.googleapis.com/css?family=Nunito:300,400,700');
body {
font-family: "Nunito", sans-serif;
background: #eff1f7;
margin: 0;
}
.content {
grid-area: content;
background: url(images/shapes.png);
}
.sidebar {
grid-area: sidebar;
background: linear-gradient(to right, rgba(249,107,142,1),
rgba(218,103,230,1),
rgba(130,125,253,1));
justify-content: center;
}
.footer {
grid-area: footer;
background: white;
}
.container {
font-size: 1.5em;
width: 100%;
height: 100vh;
display: grid;
grid-template-areas:
"sidebar"
"content"
"footer";
grid-template-columns: 1fr;
grid-template-rows: 130px 800px 250px;
}
.content,
.sidebar,
.footer {
padding: 1em;
}
nav ul {
margin: 0;
padding: 0;
display: flex;
justify-content: space-between;
text-align: center;
}
nav li {
list-style: none;
padding: 1em 0;
}
nav li a {
color: white;
font-weight: 700;
opacity: 0.6;
text-decoration: none;
transition: 0.3s;
}
nav li a:hover {
opacity: 1;
}
.hero {
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.hero img {
width: 200px;
margin-right: 50px;
}
.hero h1 {
font-size: 2em;
font-weight: 300;
color: #373d46;
}
.hero p {
font-weight: 300;
line-height: 1.8em;
color: #98a0ad;
}
.action-btn {
display: inline-block;
text-decoration: none;
color: white;
font-weight: 700;
background: #867bfb;
padding: 1em 2em;
border-radius: 40px;
margin: 1em 0;
transition: 0.3s;
}
.action-btn:hover {
box-shadow: 0 10px 50px rgba(188,197,216,1);
}
footer ul {
max-width: 640px;
margin: 2em auto;
padding: 0;
text-align: center;
display: flex;
flex-direction: row;
}
footer ul li {
list-style: none;
align-self: flex-end;
}
footer ul li a {
text-decoration: none;
color: #c1c6ce;
}
svg {
width: 40%;
}
footer p {
font-size: 0.8em;
}
#media (min-width: 1040px) {
.container {
grid-template-areas:
"sidebar content"
"sidebar footer";
grid-template-columns: 300px 1fr;
grid-template-rows: 1fr auto;
}
nav ul {
display: flex;
justify-content: space-between;
flex-direction: column;
}
.sidebar {
background: linear-gradient(rgba(249,107,142,1),
rgba(218,103,230,1),
rgba(130,125,254,1));
padding-top: 3em;
}
.hero {
text-align: left;
margin: 2em auto;
}
.hero img {
width: 250px;
float: right;
}
.hero h1 {
font-size: 3em;
}
.hero p {
width: 60%;
}
footer ul {
max-width: 960px;
margin: 0 auto;
padding: 2em 0;
}
svg {
width: 20%;
}
}
<!DOCTYPE html>
<html>
<head>
<title>Matt Mullins Designs</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<link rel="stylesheet" href="normalize.css" type="text/css">
</head>
<body>
<div class="container">
<div class="sidebar">
<nav>
<ul>
<li>About</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</nav>
</div>
<div class="content">
<section class="hero">
<img src="images/mm1.png"/>
<div class="hero-content">
<h1>Passionate<br>UX Designer</h1>
<p>Carlsbad, CA based designer who's worked with prominent startups as well as established businesses. I find the ability to prototype creative concepts plus code the initial template to be a huge advantage.</p>
<a class="action-btn" href="#">Hire me</a>
</div>
</section>
</div>
<div class="footer">
<footer>
<ul>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 43.068 43.068"><defs><style>.a{fill:#b3b4b8;}</style></defs><path class="a" d="M0,21.534a21.1,21.1,0,0,1,2.886-10.81,21.381,21.381,0,0,1,7.838-7.838A21.094,21.094,0,0,1,21.534,0a21.094,21.094,0,0,1,10.81,2.886,21.38,21.38,0,0,1,7.838,7.838,21.094,21.094,0,0,1,2.886,10.81,21.094,21.094,0,0,1-2.886,10.81,21.38,21.38,0,0,1-7.838,7.838,21.094,21.094,0,0,1-10.81,2.886,21.094,21.094,0,0,1-10.81-2.886,21.381,21.381,0,0,1-7.838-7.838A21.1,21.1,0,0,1,0,21.534Zm3.575,0A17.365,17.365,0,0,0,8.1,33.377a24.646,24.646,0,0,1,6.546-7.709,21.41,21.41,0,0,1,8.743-4.608q-.646-1.507-1.249-2.713A52.328,52.328,0,0,1,6.116,20.715q-1.68,0-2.5-.043,0,.172-.022.431T3.575,21.534Zm.56-4.436q.948.086,2.8.086a47.266,47.266,0,0,0,13.652-1.938,43.609,43.609,0,0,0-7.192-9.69,17.484,17.484,0,0,0-5.836,4.78A18.387,18.387,0,0,0,4.134,17.1ZM10.552,35.7a17.6,17.6,0,0,0,17.313,2.584,63.239,63.239,0,0,0-3.359-14.255,18.368,18.368,0,0,0-7.989,4.35A24.43,24.43,0,0,0,10.552,35.7ZM17.141,4.178a45.767,45.767,0,0,1,7.02,9.776A21.449,21.449,0,0,0,32.99,7.709,17.458,17.458,0,0,0,21.534,3.575,16.531,16.531,0,0,0,17.141,4.178Zm8.57,12.834q.646,1.378,1.464,3.488,3.187-.3,6.934-.3,2.67,0,5.3.129A17.291,17.291,0,0,0,35.186,9.906Q32.387,14.083,25.711,17.012Zm2.541,6.5a61.816,61.816,0,0,1,2.972,13.093,17.969,17.969,0,0,0,5.556-5.642,17.4,17.4,0,0,0,2.584-7.451Q36.22,23.3,33.636,23.3,31.267,23.3,28.252,23.515Z" transform="translate(0)"/></svg></li>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 63.104 39.265"><defs><style>.a{fill:#b3b4b8;}</style></defs><g transform="translate(0)"><path class="a" d="M56.988,86.8H41.176V82.876H56.989V86.8ZM30.65,102.909a10.383,10.383,0,0,1,1.53,5.752,11.455,11.455,0,0,1-1.744,6.265,10.864,10.864,0,0,1-2.778,3.084,10.733,10.733,0,0,1-4.431,1.971,27.4,27.4,0,0,1-5.544.531H0V81.247H18.963c4.78.078,8.168,1.463,10.169,4.182a9.991,9.991,0,0,1,1.8,6,8.74,8.74,0,0,1-1.815,5.781,9.257,9.257,0,0,1-2.99,2.234A8.718,8.718,0,0,1,30.65,102.909ZM9.055,96.727h8.309a7.873,7.873,0,0,0,4.151-.973A3.711,3.711,0,0,0,23.107,92.3,3.514,3.514,0,0,0,21,88.679a14.832,14.832,0,0,0-4.635-.614H9.055ZM23.907,108.1a4.211,4.211,0,0,0-2.5-4.206,9.839,9.839,0,0,0-3.926-.665H9.055v10.464h8.3A9.219,9.219,0,0,0,21.329,113C23.046,112.147,23.907,110.518,23.907,108.1Zm38.947-6.388A36.934,36.934,0,0,1,63.1,107.3H42.619q.169,4.24,2.939,5.934a7.4,7.4,0,0,0,4.054,1.056,5.711,5.711,0,0,0,5.591-3.22h7.506a9.142,9.142,0,0,1-2.724,5.083q-3.774,4.1-10.578,4.106a15.351,15.351,0,0,1-9.908-3.461q-4.282-3.469-4.288-11.267,0-7.319,3.87-11.213a13.564,13.564,0,0,1,10.062-3.9,16.036,16.036,0,0,1,6.614,1.315,11.39,11.39,0,0,1,4.855,4.165A13.882,13.882,0,0,1,62.854,101.712Zm-7.388.733A6.142,6.142,0,0,0,53.5,98a6.41,6.41,0,0,0-4.358-1.523,5.831,5.831,0,0,0-4.388,1.613,7.58,7.58,0,0,0-1.96,4.354H55.466Z" transform="translate(0 -81.247)"/></g></svg></li>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25.414 48.937"><defs><style>.a{fill:#b3b4b8;}</style></defs><path class="a" d="M104.924,61.766V39.443h7.493l1.122-8.7h-8.615V25.189c0-2.519.7-4.235,4.312-4.235l4.607,0V13.171a61.74,61.74,0,0,0-6.713-.342c-6.642,0-11.189,4.054-11.189,11.5v6.416H88.428v8.7H95.94V61.766Z" transform="translate(-88.428 -12.829)"/></svg></li>
<li><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 49.332 40.173"><defs><style>.a{fill:#b3b4b8;stroke:#5da8dc;}.a,.b{stroke-width:0.5px;}.b{fill:#fff;stroke:#fff;}</style></defs><g transform="translate(0.25 0.25)"><path class="a" d="M32.628.009V0h2.29l.837.167a8.949,8.949,0,0,1,1.519.427,10.805,10.805,0,0,1,1.321.616,12.562,12.562,0,0,1,1.158.718,7.127,7.127,0,0,1,.925.766,1.282,1.282,0,0,0,1.264.211,16.9,16.9,0,0,0,1.849-.55Q44.781,2,45.75,1.563T46.93,1l.22-.132.009-.013L47.2.837l.044-.022.044-.022.044-.022.009-.013.013-.009L47.37.74l.009-.013.044-.013L47.467.7l-.009.066-.013.066L47.423.9,47.4.969l-.022.044-.022.044-.022.066a1.532,1.532,0,0,0-.044.176,7.388,7.388,0,0,1-.418.881,11.014,11.014,0,0,1-.991,1.563,7.686,7.686,0,0,1-1.066,1.2q-.476.41-.63.572a1.89,1.89,0,0,1-.374.308l-.22.145-.044.022L43.5,6.01l-.009.013-.013.009-.013.009-.009.013-.044.022-.044.022-.009.013-.013.009-.013.009-.009.013-.009.013-.013.009-.013.009-.009.013h.22l1.233-.264a22.063,22.063,0,0,0,2.356-.638l1.189-.4.132-.044.066-.022.044-.022.044-.022.044-.022.044-.022.088-.013.088-.009V4.8l-.022.009-.022.013-.009.013-.013.009-.013.009-.009.013-.009.013-.013.009-.013.009L48.7,4.91l-.009.013-.013.009-.022.044-.022.044-.013.009-.559.749a6.188,6.188,0,0,1-.594.749q-.044.013-.123.132a12.618,12.618,0,0,1-.933.982,22.163,22.163,0,0,1-1.682,1.528,2.085,2.085,0,0,0-.837,1.656q-.013.978-.1,2.21T43.46,15.7a31.76,31.76,0,0,1-.749,3.236,29.426,29.426,0,0,1-1.233,3.523,27.445,27.445,0,0,1-1.519,3.082q-.793,1.365-1.453,2.312t-1.343,1.783q-.682.837-1.726,1.885t-1.145,1.145q-.1.1-.863.722T31.8,34.645a18.845,18.845,0,0,1-1.594,1.044q-.727.418-1.753.956a20.849,20.849,0,0,1-2.21,1q-1.189.462-2.51.859a22.927,22.927,0,0,1-2.554.616q-1.233.22-2.8.374l-1.563.154v.022H13.958v-.022l-.374-.022q-.374-.022-.616-.044t-1.827-.242q-1.585-.22-2.488-.44t-2.686-.837A26.134,26.134,0,0,1,2.915,36.82q-1.264-.625-1.585-.793t-.713-.405l-.4-.242-.009-.013L.2,35.358l-.013-.009-.009-.013-.044-.022-.044-.022-.009-.013L.066,35.27l-.013-.009-.009-.013-.009-.013-.013-.009H0v-.088l.044.009.044.013.2.022q.2.022,1.079.066t1.871,0a19.689,19.689,0,0,0,2.026-.2,22.821,22.821,0,0,0,2.444-.528,18.056,18.056,0,0,0,2.589-.889q1.176-.52,1.673-.775a16.292,16.292,0,0,0,1.506-.933l1.013-.683.009-.013.013-.009.013-.009.009-.013.009-.013.013-.009.013-.009.009-.013.044-.013.044-.009.009-.044.013-.044.013-.009.009-.013L14.355,31l-.683-.044a6.619,6.619,0,0,1-1.035-.2,9.931,9.931,0,0,1-1.519-.528,11.71,11.71,0,0,1-1.585-.837,7.8,7.8,0,0,1-1.114-.806q-.339-.317-.881-.9a8.909,8.909,0,0,1-.933-1.2,10.8,10.8,0,0,1-.757-1.422l-.366-.8L5.46,24.2l-.022-.066-.013-.044-.009-.044.066.009.066.013.484.066a10.762,10.762,0,0,0,1.519.044,11.762,11.762,0,0,0,1.431-.088q.4-.066.484-.088l.088-.022.11-.022.11-.022.009-.013L9.8,23.91l.013-.009.009-.013-.088-.022-.088-.022-.088-.022L9.467,23.8l-.088-.022q-.088-.022-.308-.088t-1.189-.484a9.092,9.092,0,0,1-1.541-.815,10.644,10.644,0,0,1-1.092-.867A12.461,12.461,0,0,1,4.117,20.3a8.808,8.808,0,0,1-1.1-1.739,10.578,10.578,0,0,1-.727-1.893,10.222,10.222,0,0,1-.317-1.827l-.079-.925.044.009.044.013.044.022.044.022L2.114,14l.044.022.683.308a8.611,8.611,0,0,0,1.7.528q1.013.22,1.211.242l.2.022h.4l-.009-.013L6.319,15.1l-.013-.009L6.3,15.081l-.009-.013-.013-.009-.013-.009-.009-.013-.044-.022-.044-.022-.009-.013-.013-.009-.013-.009-.009-.013-.044-.022-.044-.022-.009-.013-.379-.282a5.775,5.775,0,0,1-.757-.718q-.4-.44-.793-.925a7.14,7.14,0,0,1-.7-1.035,12.544,12.544,0,0,1-.652-1.4,9.94,9.94,0,0,1-.515-1.7,9.7,9.7,0,0,1-.2-1.7A10.675,10.675,0,0,1,2.07,5.7a9.353,9.353,0,0,1,.264-1.343,10.465,10.465,0,0,1,.572-1.585l.374-.837L3.3,1.871l.022-.066L3.338,1.8l.009-.013.009-.013.013-.009.013.009.009.013L3.4,1.8l.013.009.013.009.009.013.009.013.013.009.022.044.022.044.013.009.009.013.594.66q.594.66,1.409,1.475a8.28,8.28,0,0,0,.9.845.645.645,0,0,1,.22.2,8.989,8.989,0,0,0,.881.779q.749.616,1.959,1.431t2.686,1.607a26.208,26.208,0,0,0,3.17,1.431q1.7.638,2.378.837t2.334.506q1.651.308,2.488.4t1.145.1l.308.009-.009-.066-.013-.066-.088-.55a10.347,10.347,0,0,1-.088-1.541,10.105,10.105,0,0,1,.154-1.827,10.825,10.825,0,0,1,.462-1.7,9.056,9.056,0,0,1,.6-1.378A13.558,13.558,0,0,1,25.8,3.941a9.495,9.495,0,0,1,1.255-1.365,9.26,9.26,0,0,1,1.761-1.255A11.45,11.45,0,0,1,30.647.484,8.515,8.515,0,0,1,32.056.11a4.9,4.9,0,0,0,.572-.1Z"/><path class="b" d="M0,17.569V0H32.628V.009a4.909,4.909,0,0,1-.572.1,8.515,8.515,0,0,0-1.409.374,11.45,11.45,0,0,0-1.827.837,9.26,9.26,0,0,0-1.761,1.255A9.495,9.495,0,0,0,25.8,3.941a13.558,13.558,0,0,0-.784,1.176,9.056,9.056,0,0,0-.6,1.378,10.825,10.825,0,0,0-.462,1.7,10.105,10.105,0,0,0-.154,1.827,10.347,10.347,0,0,0,.088,1.541l.088.55.013.066.009.066-.308-.009q-.308-.013-1.145-.1t-2.488-.4q-1.651-.308-2.334-.506t-2.378-.837a26.208,26.208,0,0,1-3.17-1.431Q10.7,8.168,9.489,7.353T7.53,5.922a8.989,8.989,0,0,1-.881-.779.646.646,0,0,0-.22-.2,8.28,8.28,0,0,1-.9-.845Q4.712,3.28,4.117,2.62l-.594-.66-.009-.013L3.5,1.937l-.022-.044-.022-.044-.013-.009-.009-.013-.009-.013-.013-.009L3.4,1.8l-.009-.013L3.382,1.77l-.013-.009-.013.009-.009.013L3.338,1.8l-.013.009L3.3,1.871l-.022.066-.374.837a10.465,10.465,0,0,0-.572,1.585A9.353,9.353,0,0,0,2.07,5.7a10.675,10.675,0,0,0-.044,1.431,9.7,9.7,0,0,0,.2,1.7,9.94,9.94,0,0,0,.515,1.7,12.548,12.548,0,0,0,.652,1.4,7.14,7.14,0,0,0,.7,1.035q.4.484.793.925a5.775,5.775,0,0,0,.757.718l.379.282.009.013.044.022.044.022.009.013.013.009.013.009.009.013.044.022.044.022.009.013.013.009.013.009.009.013.009.013.013.009.013.009.009.013h-.4l-.2-.022q-.2-.022-1.211-.242a8.611,8.611,0,0,1-1.7-.528l-.683-.308L2.114,14,2.07,13.98l-.044-.022-.044-.022-.044-.013-.044-.009.079.925a10.222,10.222,0,0,0,.317,1.827,10.578,10.578,0,0,0,.727,1.893,8.808,8.808,0,0,0,1.1,1.739,12.461,12.461,0,0,0,1.132,1.224,10.643,10.643,0,0,0,1.092.867,9.092,9.092,0,0,0,1.541.815q.969.418,1.189.484t.308.088l.088.022.088.022.088.022.088.022.088.022-.009.013L9.8,23.91l-.013.009-.009.013-.11.022-.11.022L9.467,24q-.088.022-.484.088a11.762,11.762,0,0,1-1.431.088,10.762,10.762,0,0,1-1.519-.044l-.484-.066-.066-.013-.066-.009.009.044.013.044.022.066.022.066.366.8A10.8,10.8,0,0,0,6.6,26.486a8.909,8.909,0,0,0,.933,1.2q.542.581.881.9a7.8,7.8,0,0,0,1.114.806,11.71,11.71,0,0,0,1.585.837,9.931,9.931,0,0,0,1.519.528,6.619,6.619,0,0,0,1.035.2l.683.044.352.022-.009.013-.013.009-.013.044-.009.044-.044.009-.044.013-.009.013-.013.009-.013.009-.009.013-.009.013-.013.009-.013.009-.009.013-1.013.683a16.292,16.292,0,0,1-1.506.933q-.5.255-1.673.775a18.056,18.056,0,0,1-2.589.889,22.821,22.821,0,0,1-2.444.528,19.689,19.689,0,0,1-2.026.2q-.991.044-1.871,0T.286,35.182l-.2-.022-.044-.013L0,35.138ZM48.779,4.835l.009-.013.022-.013.022-.009V39.673H16.82v-.022l1.563-.154q1.563-.154,2.8-.374a22.927,22.927,0,0,0,2.554-.616q1.321-.4,2.51-.859a20.849,20.849,0,0,0,2.21-1q1.026-.537,1.753-.956A18.845,18.845,0,0,0,31.8,34.645q.872-.63,1.629-1.259t.863-.722q.1-.1,1.145-1.145t1.726-1.885q.683-.837,1.343-1.783t1.453-2.312a27.445,27.445,0,0,0,1.519-3.082,29.426,29.426,0,0,0,1.233-3.523A31.76,31.76,0,0,0,43.46,15.7q.242-1.431.33-2.664t.1-2.21a2.085,2.085,0,0,1,.837-1.656A22.162,22.162,0,0,0,46.41,7.64a12.616,12.616,0,0,0,.933-.982q.079-.119.123-.132a6.188,6.188,0,0,0,.594-.749l.559-.749.013-.009.022-.044.022-.044.013-.009L48.7,4.91l.009-.013.013-.009.013-.009.009-.013.009-.013.013-.009.013-.009ZM35.755.167,34.918,0H48.832V4.712l-.088.009-.088.013-.044.022-.044.022-.044.022-.044.022-.066.022-.132.044-1.189.4a22.063,22.063,0,0,1-2.356.638L43.5,6.187h-.22l.009-.013.013-.009.013-.009.009-.013.009-.013.013-.009.013-.009.009-.013.044-.022.044-.022.009-.013.013-.009.013-.009L43.5,6.01l.044-.022.044-.022.22-.145a1.89,1.89,0,0,0,.374-.308q.154-.163.63-.572a7.694,7.694,0,0,0,1.066-1.2,11.014,11.014,0,0,0,.991-1.563,7.388,7.388,0,0,0,.418-.881,1.532,1.532,0,0,1,.044-.176l.022-.066.022-.044L47.4.969,47.423.9l.022-.066.013-.066L47.467.7l-.044.009-.044.013L47.37.74l-.013.009-.013.009-.009.013-.044.022-.044.022L47.2.837l-.044.022L47.15.872,46.93,1q-.211.119-1.18.559t-1.959.793a16.9,16.9,0,0,1-1.849.55,1.282,1.282,0,0,1-1.264-.211,7.12,7.12,0,0,0-.925-.766,12.571,12.571,0,0,0-1.158-.718A10.805,10.805,0,0,0,37.274.594,8.949,8.949,0,0,0,35.755.167ZM0,37.45V35.226H.022l.013.009.009.013.009.013.013.009.013.009.009.013.044.022.044.022.009.013.013.009.013.009.009.013.4.242q.4.242.713.405t1.585.793a26.134,26.134,0,0,0,3.051,1.246q1.783.616,2.686.837t2.488.44q1.585.22,1.827.242t.616.044l.374.022v.022H0Z"/></g></svg></li>
</ul>
</footer>
</div>
</div>
</body>
</html>

I cant get CSS grids to line up

I got my header to work fine, however I cant get my pictures to follow my columns. Basically in the code below I want .left and .mid to line up horizontally ( and there is going to be a 3rd picture as well) Right now they are lining up vertically. I think I might be doing something wrong with the column set up but I am not sure
#import url('https://fonts.googleapis.com/css?family=Sofia');
body {
margin: 0;
}
nav {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-auto-rows: auto;
grid-gap: 1em;
align-items: center;
text-align: center;
/*border-bottom: 4px solid black;*/
background:#0066cc;
}
#media screen and (max-width: 900px) {
nav {
grid-template-columns: 100%;
grid-template-rows: auto;
grid-gap: 1em;
}
}
.1 {
grid-column: 1;
}
.2 {
grid-column: 2;
}
.logo {
grid-column: 3;
background-image: url("images/cocinaheader.png");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 6vh;
}
.3 {
grid-column: 4;
}
.4 {
grid-column: 5;
}
.navLinks {
font-family: 'Sofia';
font-size: 1.2em;
text-transform: uppercase;
text-decoration: none;
color: black;
}
.navLinks:hover {
color: white;
border-left: 1px solid white;
border-right: 1px solid white;
padding: 1em 1em;
}
#twist {
color: blue;
}
banner {
padding: 1em 1em;
display: grid;
grid-template-rows: 100%;
}
.bannerlogo{
grid-row: 1;
/*background-image: url(images/banner.jpg);*/
background-position: center;
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
.h1{
font-family: 'Sofia';
font-size: 1em;
text-transform: uppercase;
color: black;
}
block {
display: grid;
grid-template-columns:20% 20% 20% 20% 20%;
/*grid-auto-rows: auto;*/
grid-gap: 1em;
align-items: center;
}
.left {
grid-column: 2;
background-image: url("images/foodleft.png");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 20vh;
}
.mid {
grid-column: 3;
background-image: url("images/foodmid.jpg");
background-position: center;
background-size: contain;
background-repeat: no-repeat;
height: 20vh;
}
<header>
<nav class="container">
<div class="1">
Home
</div>
<div class="2">
Menu
</div>
<div class="logo">
</div>
<div class="3">
About Us
</div>
<div class="4">
Contact Me
</div>
</nav>
</header>
<br><br><br><br>
<main>
<div class="banner">
<div class="bannerlogo">
<center>
<img src="images/banner.jpg">
</center>
</div>
<br><br><br><br><br><br>
<div class="h1">
<center><h1>A taste of our menu</h1></center>
</div>
<!-- Start block grid -->
<div class="block">
<div class="left"></div>
<div class="mid"></div>
</div>

You cannot use just numbers as class names in css. Try using .item1 .item2 etc...