Want use Flexbox OR CSS Grid to wrap items

I wanted to make the word and the logo on the same line, i’ve applied (Display: flex;) and (Flex-direction: row;) but is still wont get beside the logo!

<style>
#header-img {
  width: 70px;
}
#logo-name {
  width:auto;
  display: flex;
  flex-direction: row;
}
#header {
display: flex;
flex-direction: column;
 justify-content: space-arround;
}
</style>

<main>
  <div id="header-space">
    <header id="header">
     <div> <img id= "header-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Facebook_logo_36x36.svg/1200px-Facebook_logo_36x36.svg.png" alt="FaceBook-logo"/> </div>
      <h1 id="logo-name">Facebook</h1>
    </header>
      </div>
  
  
  
  
  
  
  
  
  
  
</main>

put them in table tag and in same row

1 Like

within the header id, I suggest you give the flex-direction a value of row instead of column. Again, you may want to consider wrapping both the word and image within two different div element. These two div elements in return share common parent div class.
Give the parent div class both the value of flex and flex-wrap.

1 Like

Also remember: Your h1 element is a block level element, therefore you may want to apply an id with property - display: flex;

1 Like

You’re applying the rules you to the flex child, not the flex element. ie the rules you want applied you’ve applied to #logo-name rather than #header.

Flex properties generally describe how the direct child elements of an element behave

<header id="header"> <!-- <- this is what you apply the rules to -->
  <div><img id= "header-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/ff/Facebook_logo_36x36.svg/1200px-Facebook_logo_36x36.svg.png" alt="FaceBook-logo"/></div>
  <h1 id="logo-name">Facebook</h1> <!-- <- this is what you've applied them to -->
</header>

Also I’m assuming you realise this, but just in case, don’t follow this advice.

1 Like