Align items to the right

Can anyone tell me, how do i put my logo picture on the left, and my navbar on the right?
(also my footer (privacy, terms, contact) is on the left and i cant move it to the right…


Then take a look at this project… this navbar is on the right… But i dont know how?

So a little google research shows a solid solution posted on SO: https://stackoverflow.com/questions/50178709/set-my-logo-to-the-left-and-navigation-menu-to-the-right-using-flexbox

Basically, now that you have display:flex; on the header, use margins on the logo and nav containers to push them around inside the flex.

okay i somehow managed to push navbar to right, but can you take a look at footer?

both the ul and the span in your footer are flex containers, set to flex-end. That is what is right-justifying everything in them. What exactly do you want the footer elements to be doing?

look at those two codes… The first code is from freecodecamp and i copy/pasted it to my css, just to show you it acts differently…Here you go:

1 Like

yet, his footer is on the right, and mine is still on the left.

His is different, because he’s using a CSS preprocessor. Take a look at the title of the CSS tab on his – do you see CSS (scss) up there? It’s CSS-ish. Yours is straight CSS, which doesn’t allow for nested CSS selectors.

:neutral_face: hi , i didn’t take a deep look into your a code , but the solution that i found , is 1st to designate your "ul “inside your footer by using combinator, i think you should read about , is very useful in . css , specially when you forget to give class’s name to your different lists in your html to separate them , so , try this " oh before this, take off the” footer "tag in your html so it will be the last one in html structure no div tag after footer :
/* CSS */
footer {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
align-items:center;
margin-top: 30px;
background-color: #e6e6e6;
padding: 10px;
}

/* space combinator used here between ul and footer*/
footer ul {
width:40%;
}

li {

padding: 0 10px;
}
ihope i solves your problem man , and thx for helping us to learn with you .

1 Like

True, but the question was why the same css on two codePen yielded different results.

In one, the author used an SCSS pre-processor, which allows nested styles, andd will exand theem out exactly as you suggest.

1 Like

Css is kind of limited in what you want it to do right?

There are far fewer limits to what css can do than most people think. Within its intent, CSS is pretty darn powerful.

Generally I find that it isn’t a shortcoming of CSS that’s the problem – it’s a lack of knowledge on my own part.