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 Introducing the Practice

boi
boi
14,242 Points
Posted by boi
boi
14,242 Points

Can't seem to use Flexbox

The first task in this practice session is to center the main and footer elements. I'm well aware that the practice is directed towards using the margin: auto but I'm trying to center it using flexbox. Any help would be appreciated.

main {
  display: flex;
  justify-content: center;
  padding: 1rem 1rem 3rem;
  hyphens: auto;
  max-width: 1000px;
}

For the detailed HTML and CSS please view the workspace of the video.

https://teamtreehouse.com/library/introducing-the-practice-54

2 Answers

Dylan Bailey
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Dylan Bailey
Front End Web Development Techdegree Graduate 17,232 Points
Dylan Bailey
.a{fill-rule:evenodd;}techdegree seal-36
Dylan Bailey
Front End Web Development Techdegree Graduate 17,232 Points

The reason your code isn't working is because you've made <main> the flex container. Once you make a flex container, you need to then work on the items inside of it. This is why you'll see people wrap items in a <div> and make said <div> the flex container.

Basically you'll want to set a flex container, then give the items inside of it width/height, which'll allow you to begin aligning them.

This is a great site to practice Flexbox: https://flexboxfroggy.com/

Kristjan Vingel
Kristjan Vingel
7,992 Points
Kristjan Vingel
Kristjan Vingel
7,992 Points

This is how I did it.

.main {
    display: flex;
    justify-content: center;
}

article {
    max-width: 700px; 
}

I removed the max-width on .main and added it for article.

boi
boi
14,242 Points
boi
boi
14,242 Points

I can't understand the working of this. Why isn't my solution working? I've done it your way and it works but what I fail to understand is your approach. Any feedback would be appreciated.