Right aligning buttons in flexbox


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">
	display: flex;
	flex-direction: column;
	align-items: center;

	padding: 80px 200px;

	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;


How about changing the flex-direction to row?

Thank you!

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

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?


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

Thanks for helping.

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