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

Posted by Eliot Murton
Eliot Murton
7,315 Points

Trouble aligning text. Please help.

Hi. I have created a gallery of six photos, evenly spaced to two columns (CSS below). Above the gallery I have a paragraph which for some reason I can not get to line up centrally. I want the text to go no wider that the gallery below it but it always creeps of the side a little bit. It is really stumping me what to do.

gallery li {
    float: left;
    width: 45%;
    margin: 1.5%;   
    border: 1%;
    border-style: solid;
    border-color: silver;
}

Below is the CSS I current have in my attempt but it is not working.

#section1 {
    color: black;
    background-color: silver;
        padding: 1%;
    text-align: center;

}

8 Answers

A Z
A Z
13,005 Points
A Z
A Z
13,005 Points

Eliot Murton,

Hi, quick question...is the paragraph above and the images wrapped inside the #section1? or does everything need a wrapper to maintain the preferred width parameters?

Regards, Michael

Eliot Murton
Eliot Murton
7,315 Points
Eliot Murton
Eliot Murton
7,315 Points

Hi. The paragraph is wrapped inside #section1 (which is inside a div with its own ID. No matter how big I make #wrapper2 (whether I use px of %), the div that I have given a background to always seems to creep out over the gallery to the right more than it does to the left. 

<div id="wrapper2">
            <section id="section1">
                <h3>Some Pictures I Took</h3>
                <p>I have always appreciated a good photo. There are many times when I spotted a photo opportunity but did not have a camera capable of doing justice to the opportunity in front of me.</p>
                <p>I have been very impressed with the phone on my new camera and on occassion can be very click happy. Despite this there are many pictures that I enjoy looking at. Here is a selection of some of these photos.</p>
            </section>
            <section>
                <ul id="gallery">
                    <li>
A Z
A Z
13,005 Points
A Z
A Z
13,005 Points

Eliot,

This may get you one step closer. I made some adjustments with the following:

#section1 {
  color: black;
  background-color: silver;
  padding: 1%;
  text-align: center;

  margin-left: 2.75%;
  margin-right: 2.75%;
}

#gallery {
  padding: 0;
  text-align: center;
}

#gallery li {
  width: 45%;
  margin: 1.5%;   
  border: 1%;
  border-style: solid;
  border-color: silver;

  display: inline-block;
}

Margins have been added to #section1. A padding has been added along with a text-align center to #gallery. Float has been removed and replaced by displaying inline-block to the #gallery li.

Regards, Michael

Eliot Murton
Eliot Murton
7,315 Points
Eliot Murton
Eliot Murton
7,315 Points

This has worked. Thank you very much! I was using some of the code from one of the courses on here and making adjustments for what I wanted but obviously not doing a very good job. The margin-left and margin-right seems so obvious now you pointed it out. That is a much better way to do it! Thank you!

Eliot Murton
Eliot Murton
7,315 Points
Eliot Murton
Eliot Murton
7,315 Points

I have just noticed now that there is a small horizontal line showing through to the background which is between the bottom of each of the li photo's and the silver border.

A Z
A Z
13,005 Points
A Z
A Z
13,005 Points

Eliot,

I noticed that with my testing as I used a red background but I did not know if it was the test photos I was utilizing. What are you styles for your images?

Regards, Michael

Eliot Murton
Eliot Murton
7,315 Points
Eliot Murton
Eliot Murton
7,315 Points

Only the above code and..

#wrapper2 {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 5%;
}
A Z
A Z
13,005 Points
A Z
A Z
13,005 Points

How's it going Eliot,

You could alternatively, remove the border styles from #gallery li and add them to the img along with a width:

img {
  width: 100%;
  border: 1%;
  border-style: solid;
  border-color: silver;
}

Regards, Michael