Bummer! You must be logged in to access this page.

Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Aligning headings.

Hi guys,

I have this project, where I have to create a small basic site.. I have the majority of it. But I have 6 headings with links underneath them. That I have to place horizontally.

But I am having no luck in actually figuring out how to do it. I am following along with the CSS layout tutorial but I am still having no luck. Any one think they know?

It is much appreciated.

This is the code i am trying to edit. So that they all align together in order. <div class="secondary-wrapper"> <div class="container"> <hr> <h3>Contact Us</h3> <h3>Contact Us</h3> <h3>Contact Us</h3> <h3>Contact Us</h3> <h3>Contact Us</h3> </hr> </div> </div>

8 Answers

Hi, there! If you want to align your headings you can use the text-align property and use the value that suits you the most. Check it out: https://www.w3schools.com/cssref/pr_text_text-align.asp

Ah awesome, I will give it a look over. I don't know how I didn't think of this before damn..

Thank you again my friend much appreciated.

Hey guys..

Sorry again. I still can not seem to get it to work.. Basically you know on some web pages at the bottom of the web pages they have links so to a careers page or to an about and like a mini navigation.. At the bottom. I can't actually show you what I am after. Because I can't link it to work spaces does this make sense?

Hi Daniel,

It might help others to help you if you mark out the code. Click on "Markdown Cheatsheet" below the post field. And then put code comments on the areas you need help with. Also, this sounds like something Flexbox could be of use with? I'm a student just like you, but that is just a hunch based on your description.

Hi Mike,

It's a bit hard to show the code as such, I am following a img that I was sent to do as a small project.

I've not used a Flexbox yet but I will have a look at the tutorial. I am re-learning CSS so getting back into it. Thank you for your reply.

Daniel,

Did you have any luck since yesterday? And do you think Flexbox was the answer? Since none of the pros are answering here I'd recommend trying one of the web dev subreddits on reddit. You always get a quick answer there as it's more populated.

In terms of positioning items, flexbox is the best thing you could do. It is a good idea that you study it, it's really simple and you could position flex items without any effort. You'll need to review Gui's css flexbox layout course to pull it off but the property you need to align those elements is justify-content: center; But before doing so, you must convert the div that has those items into a flex container. Check Gui's course, it's amazing and he does an outstanding job explaining it. Here is a link to the course: https://teamtreehouse.com/library/css-flexbox-layout

Cheers!

Hi Guys,

Thank you for the response it is much appreciated.. I had to have the small project done by the deadline which was this morning..

I managed to get the whole thing to meet a majority of the criteria, apart from the bit I was stuck on but I did the best I could. If It wasn't 100% then I know what I need to work on.

Thank you all for your responses. This community Rocks

Cheers

You're welcome, Daniel. Just out of curiosity, what was the solution or method you used to solve the problem in the end?

I used a Flexbox to get a similar sort of area to what the project asked for. It was not exactly like the diagram, but I gave it a shot haha.

Cool, Daniel!