Coder_Nick Coder_Nick - 17 days ago 5
CSS Question

Keep logo in left corner and centre ul elements with CSS

I have a header element that has an img tag and ul tag wit 3 li elements.
I have the logo in the img tag in my left corner. I want to position the 3 li elements in the centre of the header element.

In my React component I have

<header>
<img src={nicklogo} className="logo" alt="logo" />
<ul>
<li>Me</li>
<li>Projects</li>
<li>Skills</li>
</ul>
</header>


My styles are

header {
display: flex;
paddingBottom: 8px;
paddingLeft: 5px;
}

.logo {
margin-top: 5px;
height: 40px;;
padding-left: 10px;
}

ul {
display: flex;
list-style-type: none;
font-size: 15px;
justify-content: center;
font-weight: 100;
}

li {
padding-right: 10px;
}


I also want to make it scale when people are reading it on different size screens.

Answer

try this

header {
  display: flex;
  paddingBottom: 8px;
  paddingLeft: 5px;
}
.logo {
  margin-top: 5px;
  height: 40px;
  
  padding-left: 10px;
}
ul {
  margin: auto;
  list-style-type: none;
  font-size: 15px;
  justify-content: center;
  font-weight: 100;
}
li {
  display: inline;
  padding-right: 10px;
}
<header>
  <img src={nicklogo} className="logo" alt="logo" />
  <ul>
    <li>Me</li>
    <li>Projects</li>
    <li>Skills</li>
  </ul>
</header>