CSS

body {
font-family: Georgia, 'Times New Roman', Times, serif;
color: #333;
font-size: 1.3rem;
line-height: 1.6em;
margin: 0;
}

h1 {
font-size: 2rem;
line-height: 1.3em;
}

p {
margin-bottom: 1.6rem;
}

.container{
width: 85%;
max-width: 850px;
margin: 0 auto;
}

.header{
background: #333;
color: white;
padding: 2rem 0;

position: fixed;
left: 0;
top: 0;
right: 0;
}

.header a{
color: white;
text-decoration: none;
}

.logo-nav-container{
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}

.logo{
letter-spacing: 15px;
font-size: 1.3em;
}

.menu-icon{
display: none;
}

.navigation ul{
margin: 0;
padding: 0;
list-style: none;
}

.navigation ul li {
display: inline-block;
}

.navigation ul li a{
display: block;
padding: 0.5rem 1rem;
transition: all 0.3s linear;
border-radius: 5px;
}

.navigation ul li a:hover{
background:#4a4a4a;
}

.main{
padding-top: 12rem;
}

.footer{
background: f2f2f2f;
padding: 4rem 0;
text-align: center;
margin-top: 6rem;
}

@media only screen and (max-width: 767px){ [Código...] 

.menu-icon{ 
display: block;
cursor: pointer;
padding: 0.5rem 1rem;
}

.navigation{
width: 100%;
margin-top: 1rem;
}
.navigation ul{
display: none;
}
.navigation ul.show{
display: block;
}
.navigation ul li {
display: block;
}

.navigation ul li a{
display: block;
padding: 0.5rem 0rem;
transition: all 0.3s linear;
border-radius: 5px;
}

.navigation ul li a:hover{
background:#4a4a4a;
}
}