Looking for a way to align items inline

HTML-CSS
#1

Hi guys!
I need help with aligning items.

[my code is here]
(https://codepen.io/vandr7/pen/QWGqEvy?editors=1100)

It seems an easy topic, but I am experiencing difficulties aligning the logo and the text in one line.
Somehow the text comes below the logo.
Next thing I want to do is to place a navbar in the same line. Navbar has to be on the right.
I understand that it has to be done with display:flex, applied to the parent container.
The other thing I want to do is to have background behind logo and text to be green. I have changed the colour of elements(to green), but Iā€™d prefer to change color of the parent of these elements.

#2

The #header element only has one child element .logo_name, so that is the only flex child.

If you want to affect the child elements inside the .logo_name element you have to make it a flexbox container as well.

Edit: Also, you have logo_name in the HTML but .logo-name in the CSS

1 Like
#3

I would suggest you put the #logo and #name elements inside the .logo-name container. Then set it to be a flex container and push the nav to the right using margin-right: auto.

Example code 
<header id="header">
  <div class="logo-name">
    <img id="logo" src="https://aws1.discourse-cdn.com/freecodecamp/original/3X/4/c/4c06248fcb7353707abcde9f10fc43a5fb6748db.svg" alt="company logo">
    <p id="name">Become Coder</p>
  </div>
  <nav id="navbar">
    <ul>
      <li><a href="#">profile</a></li>
      <li><a href="#">languages</a></li>
      <li><a href="#">forum</a></li>
    </ul>
  </nav>
</header>

body {
  background: orange;
}

#header {
  display: flex;
  align-items: center;
  width: 100%;
  background: grey;
}

.logo-name {
  display: flex;
  margin-right: auto;
  background: green;
  padding: 5px;
}

#logo {
  padding: 5px;
  background: green;
}

#name {
  font-size: 1.5em;
  background: green;
  color: white;
}

#navbar {
  background: red;
}

li {
  display: inline;
  font-weight: bold;
  font-size: 1.5em;
  margin: 0 5px;
}
1 Like