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
Alita Edmonds
6,068 PointsCentering paragraphs
Hi! I am trying to center my paragraphs that have the class "stories." Every time i use inline or inline block, the paragraph background shrinks up and leaves the text in the center. Any idea how to fix this? Thanks!
HTML <main> <div class="posts"> <section class="stories"> <h1>Alita</h1> <p>Hi</p> </section> <section class="stories"> <h1>Alita</h1> <p>Hi</p> </section> </div> </main>
CSS .stories { margin-right: 400px; margin-left: 400px; margin-bottom: 20px;
padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 100px;
background: #f0f1f1;
border-top: 20px solid #c4fffc; border-radius: 10px; box-shadow: 0 5px 1px rgba(0, 0 , 0, .100); }
Brendan Whiting
Front End Web Development Techdegree Graduate 84,735 PointsAlso FYI there's a great article from CSS tricks on all the ins and outs of trying to center things in css: https://css-tricks.com/centering-css-complete-guide/
Alita Edmonds
6,068 PointsThanks, the post helped a bit. Yes, I did say the wrong thing! Ha! What I guess I am trying to say is that my text and background is centered but I want the two backgrounds and their paragraphs to display side by side, horizontally. The property i was using is this:
.stories { display: inline-block; }
Thanks for the help!
5 Answers
Steven Parker
229,785 PointsTo place them side-by side, you can change their mode to inline-block and constrain the width to just under half. Then to center them, constrain the width of the container and use auto margins:
.stories {
display: inline-block;
width: 49.5%;
box-sizing: border-box;
}
.posts {
width: 80%;
margin: auto;
}
Steven Parker
229,785 PointsThe sample code has no paragraph elements in it, and the class you mention is applied to a section instead.
Because of this discrepancy, I'm not sure I understand what you are intending. But if you want the text centered, you can apply this CSS property: "text-align: center;".
Andres Ramirez
18,094 PointsAlita Edmonds,
Your code is a bit hard to understand, but in general - when you want to center items in the page apply the following:
div { width: 100%; margin: 0 auto; }
Never use such a large margin (400px) left/right!
Alita Edmonds
6,068 PointsYes, the margins where hard to fix and make. That will help the centering but what I want to happen is my two paragraphs display side by side. I told the wrong thing in the description. I am sorry! I would like the paragraphs and their background to display side by side. Sorry for the confusion! Thanks
Alita Edmonds
6,068 PointsThank you Steven and everyone else for your help! I really appreciate it. Thanks!
Brendan Whiting
Front End Web Development Techdegree Graduate 84,735 PointsBrendan Whiting
Front End Web Development Techdegree Graduate 84,735 PointsCan you post the code with the attempt at centering the paragraph that produced the wrong result? Also FYI to clarify you don't have paragraphs with a class of 'stories', you have paragraphs inside section elements that have a class of 'stories'.