CSS of the header has incorrectly overlapping elements

Question

I'm currently working on freecodecamp and try to evolve my kind of tribute page.

However, I don't quite get what I'm doing wrong with the styling of the header. Unfortunately the logo and h1 overlap and the text of my li elements of the navbar are spaced strangely. The logo should be far more left. What can I do?

[Picture of my Header so far][1]

* {
  box-sizing: border-box
}

header {
  width: 100%;
    height: 200px;
    background-color: #bcc5d2;
    display: flex;
  align-self: flex-start;
  justify-content: center;
  align-items: center;
  color: #252223;
  font-size: 16px;
  font-family: Railway, sans-serif;
  margin: 0;
}

h1 {
  font-family: Railway, sans-serif;
}

.logo {
width: auto
height: auto;
max-width: 175px;
display: flex;
max-height: 175px;
}

nav > ul {
  display: flex;
  list-style-type: none;
}

body {
    color: #1b1b32;
    font-family: Railway, sans-serif;
  margin: 0;
  padding: 0;
}

main {
  padding: 30px;
}

#gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0 4px;
}

#gallery img {
  width: 25%;
  height: 300px;
  margin-top: 8px;
  padding: 0 4px;
  border-radius: 10px;
}

@media (max-width: 800px) {
  #gallery img {
    width: 50%;
  }
}

footer {
    background-color: #bcc5d2;
    display: flex;
    justify-content: center;
    list-style: none;
  }

footer > ul {
  list-style: none;
  font-family: Railway, sans-serif;
  justify-content: space-evenly;
}





    Jasmin Mühlbach rediscovers Brandenburg
    
    
    
    
  




  
    
      
    
    Rediscover Brandenburg
    
      
        Start
        About Rediscover Brandeburg
        About Jasmin
        Reiseblog
        Medien
        
      
      
        
    


  
    
    Selbst Wiederentdecken
    
    
      
      
      
      
      
      
      
      
      
      
      
    

  
    
      Kontakt


      Impressum

user_17462209 · Answer

You could play around with the justify-content attribute in your header style selector to get your desired result.

    header {
        width: 100%;
        height: 200px;
        background-color: #bcc5d2;
        display: flex;
        align-self: flex-start;
        /* This brings all content in it to the center */
        justify-content: center;
        /*
        Try 
         justify-content: space-around; 
        or
         justify-content: space-around; 
         or
         justify-content: space-around; 
         Till you get your result
         */
        align-items: center;
        color: #252223;
        font-size: 16px;
        font-family: Railway, sans-serif;
        margin: 0;
    }

user_2328438 · Answer

First of all your styling has some issues like after .logo width:auto you have to put ";" and also in Html the

all you have to do is change header css from "justify-content: center;" to "justify-content: space-around;" to get space between your header elements.

user_19345903 · Answer

I tried a thousand times and I was able to figure it out. I'm not a native speaker. Therefore, I'm unable to clearly express, what I changed using the right technical terms. So I try it in my own words: it was all about how I addressed the HTML elements using CSS.





    Jasmin Mühlbach rediscovers Brandenburg
    
    
    
    
  




  
    
      
    
    
      
        Start
        About Rediscover Brandenburg
        About Jasmin
        Reiseblog
        Medien
        
      
      
          

    

  
    
    Rediscover Brandenburg

    
    
      
      
      
      
      
      
      
      
      
      
      
      
    

  
    
      Kontakt


      Impressum

* {
  box-sizing: border-box
}

header {
  width: 100%;
    height: 200px;
    background-color: #bcc5d2;
    display: flex;
  justify-content: space-between;
  align-items: center;
  color: #252223;
  font-size: 16px;
  font-family: Railway, sans-serif;
  margin: 0;
}

header > .logo, header > ul, header > h1 {
  padding: 15 px;
  display: flex;
  justify-content: space-evenly;
}

h1 {
  font-family: Railway, sans-serif;
  font-size: 16px
  width: 75px;
}

.logo {
width: auto;
height: auto;
max-width: 175px;
max-height: 175px;
display: flex;
padding-left: 45px;
}

.logoI {
  width: auto;
  height: auto;
  max-width: 75px;
  max-height: 75px;
  padding-right: 45px;
}

a:link, a:visited {
    text-decoration: none;
    color: #252223;
}

nav > ul > li {
    list-style-type: none;
    list-style: none;
    display: inline;
    padding: 50px;
    font-weight: bold;
    flex-wrap: nowrap;
}


body {
    color: #1b1b32;
    font-family: Railway, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #EFF2F6;
}

main {
  padding: 30px;
}

#gallery {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0 4px;
}

#gallery img {
  width: 25%;
  height: 300px;
  margin-top: 8px;
  padding: 0 4px;
  border-radius: 10px;
}

@media (max-width: 800px) {
  #gallery img {
    width: 50%;
  }
}

footer {
    background-color: #bcc5d2;
    display: flex;
    justify-content: center;
    list-style: none;
  }

footer > ul {
  list-style: none;
  font-family: Railway, sans-serif;
  justify-content: space-evenly;
}

Here's my full solution:

CSS of the header has incorrectly overlapping elements

3 Answers