Align items to the right

Align items to the right
0

#1

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?


#2

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.


#3

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


#4

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?


#5

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:


#6

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


#7

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.


#8

: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 .


#9

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.


#10

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


#11

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.