Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Daniel Stockham
Daniel Stockham
10,277 Points

Centering elements

I'm running into this issue where I want the "About Us" element to center all children while changing the size of the paragraph tag to a smaller box.

The problem is that when re-sizing the width, the paragraph isn't center anymore. How can I go about fixing that?

<html>
  <head>
    <meta charset="utf-8">
    <title>Trekking</title>
    <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
    <link href="normalize.css" rel="stylesheet">
    <link href="main.css" rel="stylesheet">
    <meta name="viewport" content="width=device-width, inital-scale=1.0">
  </head>
  <body>
    <header>
        <div class="thumb"><img src="" href="#" alt="symbol of a hiking boot" /></div>
        <nav>
            <ul>
                <li>home</li>
                <li>products</li>
                <li><img class="thumb" src="" href="#" alt="image of a shopping cart" /></li>

            </ul>
        </nav>
        <div class="heading" ><h1>Our Clothing, Your Comfort</h1>
        <h3>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</h3>
        </div>
    </header>
    <div class="search">
      <div class="categories">
        <input type="checkbox" name="men">Men</input>
        <input type="checkbox" name="women">Women</input>
        <input type="checkbox" name="children">Children</input>
          <div class="extender">
            <h4>see all products</h4>
          </div>
      </div>
    </div>
    <div id="product_list">
        <div class="product_section">
            <p>men</p>
            <hr />
            <div class="page_shifter" class="shifter"><p>1 / 5 <br>&#60; &#62;
                </p>
            </div>
            <div class="item_list"> 
                <ul>
                    <li><img src=""  alt="product image with options goes here" /></li>
                    <li><img src=""  alt="product image with options goes here" /></li>
                    <li><img src=""  alt="product image with options goes here" /></li>
                </ul>
            </div>
        </div>
        <div class="product_section">
            <p>women</p>
            <hr />
            <div class="page_shifter" class="shifter"><p> 1 / 5 <br /> &#60; &#62;</p>
                <div class="item_list"> 
                    <ul>
                        <li><img src="" alt="product image with options goes here" /></li>
                        <li><img src="" alt="product image with options goes here" /></li>
                        <li><img src="" alt="product image with options goes here" /></li>
                    </ul>
                </div>

            </div>
        </div>
    </div>

    <div class="about_us">
        <h3>about us</h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
    </div>
    <div class="social_media"> 
        <img src="" alt="generic social media icon" />
    </div>
    <footer>
        <div class="company_summary">
            <h3>Trekking</h3>
            <p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
        </div>
        <div class="site_map">
            <ul>
                <li>credits</li>
                <li>privacy</li>
                <li>about</li>
                <li>contact</li>
            </ul>

        </div>
    </footer>
  </body>
</html>

And here is the CSS:

/* {
    border: 1px dashed blue;
}*/

html {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.0rem;
    text-transform: uppercase;
    display: 
}

body {
    margin: 0%;
}



/**************************************

Header/Main Nav
**************************************/

header {
    background: url(heroImage.jpg) no-repeat center;
    background-size:cover;
    /*background-clip: content-box;*/
    height: 800px;
    padding-top: 20px;
    text-align: center;
    color: #FFF;

}

.thumb {
   float:left;
}

.heading {
   position: absolute;
    bottom: 30%;

}

.heading h1 {
    font-size: 3em;

}

.heading h3 {
    font-size: 1em;
    padding: 0% 20%;

}
header nav {
    float: right;
    list-style: none;
    display: inline;
    margin-top: -10px;

}

header nav ul {
    list-style: none;


}

header nav ul li {
    display: inline;

}

/**********************

Search Area

**********************/


.search {
    color: rgb(72, 72, 72);
    text-transform: uppercase;
    display: inline;


}

.categories {
    background: rgb(245,246,248);
    padding: 4% 4%;
}

.categories input {


}

.extender {
    float: right;
    margin-top: -1.5%;
    color:rgb(255,255,255);
    font-weight: 100;
    background:rgb(170,156,117);
    padding: 5px 3%;
    border-radius: 5%;

}

/*************************

Product Section

*************************/
.product_list {
    height: 200%;
    padding: 0 6%;

}

.product_section {
    /*margin-top: 1em;*/


}

.product_section ul li {
    display: inline;

}
.product_section h3 {
    margin-left: .8em;

}


.product_section hr {
    width: 75%;
    display: inline-block;


}
shifter {
    float:right;
    margin-right: 7%;

}

.item_list {


}

/***********************************************************

About Us
***********************************************************/

.about_us {
    background: rgb(170,156,117);
    padding: 6%;
    margin: 38px 0;
    text-align: center;


}

.about_us h3 {
    color:rgb(150,135,100);

}

.about_us p {
    border: solid 1px rgb(150,135,100);
    /*width: 40%;*/
    color:rgb(70,69,67);
    text-transform: none;
    padding: 9%;
    line-height: 1.8em;

}

2 Answers

Brandon Mowat
Brandon Mowat
8,186 Points

If you want to center the p tags, be sure to give them a width that is smaller then their container and "margin: 0 auto". Like so...

.about_us {
    width: 100%;
}
.about_us p {
    width: 40%;
    margin: 0 auto;
}

This should center them.

Daniel Stockham
Daniel Stockham
10,277 Points

Thanks Brandon, that helped a lot.

Hi Daniel,

Although Brandon has already provided an excellent answer, I'll show another way to accomplish the same thing using CSS Flexible Boxes.

index.html
<div class="about_us">
  <h3>about us</h3>
  <div class="flex-container">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
  </div>
</div>
style.css
/***********************************************************

About Us
***********************************************************/

.about_us {
  background: rgb(170,156,117);
  padding: 6%;
  margin: 38px 0;
  text-align: center;  
}

.about_us h3 {
  color:rgb(150,135,100);  
}

.about_us p {
    border: solid 1px rgb(150,135,100);
    width: 40%;
    color:rgb(70,69,67);
    text-transform: none;
    padding: 9%;
    line-height: 1.8em;
}

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

Cheers