@media only screen and (min-width: 600px) { nav { max-width: 50%; margin: auto; margin-top: 25px; margin-bottom: 5%; font-size: 1.3em; border: 5px solid #DDB6F2; ul { list-style: none; margin: auto; padding: 5px; display: grid; grid-auto-flow: column; li { font-weight: bold; text-align: center; padding: 0; a { text-decoration: none; } } } } } @media only screen and (max-width: 600px) { nav { margin: 10px; list-style: none; font-size: 1.3em; border: 5px solid #DDB6F2; ul { list-style: none; padding: 0px; margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; grid-auto-rows: minmax(50px, auto); align-content: center; li { padding: 0px; margin: auto; font-weight: bold; text-align: center; a { text-decoration: none; } } } } }