Help with styling header for responsive website

Hi!

Here is the project I’m working on

I can’t figure out why I cannot make the logo appear wrap together with the other 3 links.

Can anyone help me out? I’ve been stuck for hours!

You are missing #navbar styling outside of media query for screens with a width of more than 650px.

Try adding the below:
#nav-bar {
margin-top: 10px;
width: 100%;
display: flex;
align-items: center;
justify-content: space-around;
text-align: center;
padding: 0 50px;
}

1 Like

Hi @narmada_nannaka! Thanks for taking a look.

I’ve tried your solution but my logo still does not join the links as one column.

@hassanuddinishak - Your links are within one div and your logo is on another. Both of these are within a header.

I am assuming you want all four of them to be displayed in a column when the screen size is less than 650px.

Try adding header to the media query and update flex-direction to column. For example:

@media (max-width: 650px) {
#header {
flex-direction: column
}

}

1 Like

Wow thanks @narmada_nannaka it worked!