Need help with CSS

How can I move the logo, center, right elements inside the header element?

Comments

[Suzanne Aitchison]

Can you share what your html looks like? Something like a codepen would help us help you 😊

[lolleri200]

Oh here :)
codepen.io/Sampsa96/pen/mdVPoVE

[Suzanne Aitchison]

OK great!

So if I understand your question correctly you want to achieve this:

In which case, take your three divs: header_logo, header_center, header_right and move them inside the header div. So you now have:

<div id="header">
  <div id="header_logo">
      <h2>This is a logo in a div element</h2>
  </div>
    <div id="header_center">
      <h2>This is the center in a div element</h2>
  </div>
  <div id="header_right">
    <h2>This is the right border in a div element</h2>
  </div>
</div>

That puts your elements inside the header. However, they will naturally appear one below each other. To change that so they flow left to right across the page, you can change your CSS and make use of flexbox.

Add this extra line to your header div CSS:

#header {
    width: 960px;
    height: 80px;
    background-color: powderblue;
    display: flex;
}

This will achieve the screenshot I posted. Hopefully I didn't misunderstand and this is of some help - but let me know if not!

[lolleri200]

Yes! Thank you, I couldn't find any good guides online..

[Suzanne Aitchison]

No problem! Glad I could help 😁

[lolleri200]

I noticed that the page is displayed correctly, but for some reason is not scaling if I look at it with a smaller display.

[Suzanne Aitchison]

So all of your items have a fixed with (e.g. the header is 960px wide). This means regardless of the size of screen, it will occupy 960px. If you want it to be response, try using a percentage, e.g. make the header 100% and the items inside 33%

You can also look up 'CSS media queries' which will find you further resources about making a responsive design

[Corentin Bettiol]

Woaw, please provide some code or context, I don't really known what you are trying to do right now :)

[lolleri200]

Ohh I thought I attached the picture. There :)

dev-to-uploads.s3.amazonaws.com/i/...

[Corentin Bettiol]

Thanks, someone have already answered your question :)