I figured it out. I’m using text-align and aligning the list elements to the right. My main issue now is getting the links to display as squares because as soon as I use display: inline; it squishes everything together as demonstrated below (notice how the square is more rectangular when using display:inline;)
I’m using the following code:
.squarehome {
background: -webkit-linear-gradient(top, #fac695 0%,#f5ab66 47%,#ef8d31 100%);
width: 10vw;
height: 10vw;
}
By keeping the height and width the same, I was hoping to keep the “navigation squares” in my navigation responsive.
