CSS that hits a wall

index.css

body{
  font-family: Helvetica;
}

.nav {
  width: 100%;
  height: 5%;
  display: inline-grid;
  grid-template-columns: 20% 1fr 1fr 1fr 20%;
}

ul.nav-ul>li {
  display: inline-block;
}

.media-container {
  background-color: aqua;
  display: grid;
  width: 100%;
  height: 100%;
  margin: 0;
   padding: 0;
  display: grid;
  grid-template-columns: 20% 60% 20%;
  background-color: #e1e1e1;  
  background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23c2c0c5' fill-opacity='0.65'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.image-container {
  background-color: white;
  grid-column-start: 2;
  grid-column-end: 3;
  border: solid;
  width: 100%;
  display: grid;
  grid-template-columns: 60% 40%;
  grid-template-rows: 2fr 8fr 2fr;
  height: 600px;
}

.item-1 {
  grid-column-start: 2;

}

.like-button {
	box-shadow:inset 0px 0px 0px 0px #fff6af;
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	background-color:#ffec64;
	border:3px solid #ffaa22;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-family: Helvetica;
	font-size: 15px;
	font-weight:bold;
	padding:6px 24px;
	text-decoration:none;
	text-shadow:0px 0px 0px #ffee66;
}
.like-button:hover {
	background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
	background-color:#ffab23;
}
.like-button:active {
	position:relative;
	top:1px;
}