Right aligning buttons in flexbox

HTML-CSS
#1

Hi!

I’m learning flexbox and am working with modifying code I found in an example. Trying to right align these buttons, but no success. As you can see I tried all the align options :smile: Please help?

My HTML and css below (had to remove the a hrefs in html code to be allowed to post).

<section class="cta">
  <ul class="grid">
    <li>Opt1</li>
    <li>eller</li>
  	<li>Opt2</li>
    </ul>
  </section>

section{
	display: flex;
	flex-direction: column;
	align-items: center;

	padding: 80px 200px;
}

.cta{
	position: relative;
	padding: 20px 200px;
	color: #fff;
	text-align: center;
	background-color: #282828;
	justify-content: flex-end;
	align-items: flex-end;
	align-content: flex-end;

}

right_align.jpg1280×187 11.8 KB

#2

How about changing the flex-direction to row?

#3

Thank you!

I added flex-direction: row; to .cta, but nothing changed…

#4

I tried the code you’ve posted and it doesn’t seem to recreate what’s in the screenshot. Could you post the entire CSS? Or a codepen?

#5

Yes!

Here’s the complete code: https://codepen.io/fosure/pen/VGrqLq

Thanks for helping.

#6

You could try setting the ul.grid's justify-content to flex-end

#7