Fotomatic project .content tag

Hi guys,

I just started working on the fotomatic project (file:///Users/hamda/Downloads/fotomatic_broken/index.html). When I style the .content tag in the header, it affects the whole page. What am I doing wrong?

CSS code I’m using:
header {
background-color: white;
border: black 2px solid;
}

.content {
width: 100%;
height: 85px;
display: flex;
justify-content: space-between; /* Aligns items with space in between */
align-items: center;
}

a.desktop.logo {
margin-left: 30px;
}

nav.desktop {
margin-right: 30px;
}

li {
display:inline;
margin: 30px;
}

img.icon {
width:15px;
}

@media only screen and (min-width: 400px) {
nav.mobile {
display: none;
}
}

I would appreciate some help with this one.