nav{
    background-color:lightblue;
    
}



.parallax {
  /* The image used */
  background-image: url("https://codehs.com/uploads/2dafe821753f588cb744d22eec74c7d7");
   

  /* Set a specific height */
  min-height: 700px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}


@keyframes colorChanger7 {
  from {background-color: blue; padding-left:0px
      color:white;
  }
  to {background-color: yellow; padding-left:100px
      color:black;
  }

/* Style the footer */
footer {
  background-color: #777;
  padding: 10px;
  text-align: center;
  color: white;
}

/* Clear floats after the columns */
section::after {
  content: "";
  display: table;
  clear: both;
}

   <style>
* {
  box-sizing: border-box;
}



article {
  float: left;
  padding: 20;
  width: 70%;
  background-color: #f1f1f1;
  height: 300px; /* only for demonstration, should be removed */
}

body {
  font-family: Arial, Helvetica, sans-serif;
}

/* Style the header */
header {
  background-color: #666;
  padding: 30px;
  text-align: center;
  font-size: 35px;
  color: white;
}

/* Create two columns/boxes that floats next to each other */
mynav {
  float: left;
  width: 30%;
  height: 300px; /* only for demonstration, should be removed */
  background: #ccc;
  padding: 20px;
}

/* Style the list inside the menu */
nav ul {
  list-style-type: none;
  padding:0;
}





.willThisWork:hover{
    background-color:yellow;
}
.myLocation{
    text-align:center;
  width: 200px;
  height: 100px;
  background-color: blue;
  animation-name: colorChanger;
  animation-duration: 4s;
  animation-iteration-count:infinite;
  position:absolute;
}

.Padding{
    padding-bottom:10px;
}

div.card {
    background: transparent;
 border-style: solid;
 border-width: 4px 4px 4px 4px;
border-color: black;
 border-radius: 0.3rem;
}