* { box-sizing: border-box; } body { font-family: Georgia, Times; font-size: 20px; background-color: #fff8ea; color: #594545; width: 700px; max-width: calc(100% - 20px); margin: auto; } h1 { color: #815b5b; font-family: Helvetica, Tahoma, Arial; font-weight: normal; } h2, h3, h4, h5, h6 { color: #815b5b; font-weight: normal; } a { color: darkblue; text-decoration: none; } a:hover { text-decoration: underline; } .topnav { color: #fff8ea; background-color: #594545; margin-top: 10px; padding: 5px 5px 5px 5px; } .topnav a { color: #fff8ea; padding: 10px 10px; } @media screen and (max-width: 700px) { .topnav a { float: none; display: block; text-align: left; } }