Couldn't make links order in row

I have a problem with the navbar and footer links. I can’t make them order in a row.
I tried flex-direction: row
It doesn’t fix these links too
Codepen: https://codepen.io/PufflyMuffin/pen/JjrPyyw

1 Like

if you want a the children of a flex container to be in a row, you use
display:flex; (row is the default)
so what you need to do is use display:flex; on the parent element which is the ul element.
Now you will see it looks a bit off because the width of the ul is narrow, so you need to give it a bigger width using width:x;

Thanks for that. I couldn’t solve all of them tho. Can u pay attention to nav (id=“nav-link”) please? I couldn’t fix it with display: flex; and I couldn’t fix footer side with width. It doesn’t work. Thanks for helping!

the case that is failing is

 The navbar should always be at the top of the viewport.

you must try to position on top of the viewport so that it always stays there no matter how much you scroll vertically, your navbar should always be visible at the top.
hint: try setting position attribute in styling of navbar

for the footer you should put the outside of the main div.
if you have defined a width for the main div like 60% all the boxes inside main div would
be the maximum up to 100% of the main div which is 60% of the body(page).

and for the nav’s if you want it to be fixed use position:sticky; and top:0;

for the links to be displayed in a row you could use display:inline; or inline-block for ul tag. also if you use flex display with direction row there should be enough with for it to be row and flex-wrap:wrap;

1 Like

I tried position attribute. It works but when I scroll a bit it stops. I couldn’t fix that one.

now I can’t fix the gap between footer elements. They all are connected and can’t fix with width

I am so sorry to say that but your code is such a mess. there is basic issue in your code. take a look at it again. some box and parent div’s aren’t in their desired position. there is a course in fcc youtube channel with the name responsive web design course watch it for sure.

2 Likes

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.