Centering elements

Question

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;

}

Answer 1 · 2015-06-18T19:53:35Z

June 18, 2015 7:53pm

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.

Answer 2 · 2015-06-19T01:44:53Z

June 19, 2015 1:44am

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

Welcome to the Treehouse Community

Looking to learn something new?

Daniel Stockham

Daniel Stockham

Centering elements

2 Answers

Brandon Mowat

Brandon Mowat

Daniel Stockham

Daniel Stockham

Robert Richey

Robert Richey