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 {
margin: 30px;

img.icon {

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

I would appreciate some help with this one.