.header {
        text-align: right;
        padding: 20px;
        padding-right: 50px;
        color: gray;
        font-size: xx-large;
        }

ul.nav {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden; 
        }   

.nav li {
        float: right;
        padding-right: 50px;
        font-size: x-large;
        }
@media only screen and (min-width: 320px) and (max-width: 480px){
    .nav li {
    float: right;
    padding-right: 15px;
    font-size: large;
    }  
    .header {
        text-align: right;
        padding: 2px;
        padding-right: 25px;
        color: gray;
        font-size: large;
        }
}
.nav li a {
        display: block; 
        color: gray;
        text-align: center;
        padding-top: 10px;
        text-decoration: none; 
        }

li a:hover {
        color: white;
        }