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 CSS Foundations The Box Model The CSS Box Model Concept

Luis Alonso Alvarado Carranza
Luis Alonso Alvarado Carranza
2,984 Points
Posted by Luis Alonso Alvarado Carranza
Luis Alonso Alvarado Carranza
2,984 Points

Please, someone tell how can i put that black box in the middle of the Body without put any code before. At 4:38min. :(

In my screen, doing all the steps.. the margin just go straight to the left and right sides..

Dustin Matlock
Dustin Matlock
33,856 Points

Luis, if you can post your code, I'll take a look at for you.

Luis Alonso Alvarado Carranza
Luis Alonso Alvarado Carranza
2,984 Points
Luis Alonso Alvarado Carranza
Luis Alonso Alvarado Carranza
2,984 Points

Well... In my real code i want to add a border (top-bottom) Just in the start to the end of the text. The 'div' is covering all the page.. but when i add Margin.. the text dont move like the other parts of my code... :S

html -- '''Inside of a 'Div' <p class="parrafo1">Página en construcción</p> '''

css -- ''' .parrafo1 { text-align:center; color:#79684e; border-style: solid; border-left: none; border-right: none; border-color: #8b9b3f; font-size: 50px; border-width: 2px; } '''

sorry i dont know how to share code from here... u would help me so much if i could send u my full proyect, :(

3 Answers

Dustin Matlock
Dustin Matlock
33,856 Points

Luis, to have a top and bottom border only, you could do something like this.

<div class="margin-edge">
    <p class="box">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
     </p>
</div>

.margin-edge {
    border-top: 3px solid #8b9b3f;
    border-bottom: 3px solid #8b9b3f;
}

Be sure to check the project files, so you can compare your code for setting the margin, padding, etc., to the <body> element, and of course the styles for the .box class.

For future reference, here's an animation to help with how to post code to the forum.

Posting Code

Luis Alonso Alvarado Carranza
Luis Alonso Alvarado Carranza
2,984 Points
Luis Alonso Alvarado Carranza
Luis Alonso Alvarado Carranza
2,984 Points

Nice! :) but it covers all the page from left to right.. not just in the middle

Dustin Matlock
Dustin Matlock
33,856 Points

As explained, you'll need the styles for the <body> and .box class from the project files.

From the project files:

body {
    margin: 0;
    padding: 8% 25%;
    color: #FFF;
    font: 1.2em/1.3 sans-serif;
}

p {
    margin: 0;
}

/* Box Styles
--------------------------------------------- */

.box {
    background-color: #000;
    padding: 30px;
    border: 15px solid skyblue;
    margin: 0 auto;
    width: 50%;
}
Luis Alonso Alvarado Carranza
Luis Alonso Alvarado Carranza
2,984 Points
Luis Alonso Alvarado Carranza
Luis Alonso Alvarado Carranza
2,984 Points

ohhhh i didnt see that part! Hey man thank you very much! :D! I made my night.. im just learning, sorry for my ignorance hehe Thanks again! :)

Dustin Matlock
Dustin Matlock
33,856 Points

You're very welcome :)