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 Basics (2014) The Box Model Margins

Marcos Boaventura
Marcos Boaventura
4,168 Points
Posted by Marcos Boaventura
Marcos Boaventura
4,168 Points

Margin problem

Hello.

I'm following this video by Guil and at the end of this part, he sets the primary and secondary-content div margin to auto.

On his example the all thing centeres up perfectly but mine not so much. The secondary content doesn't even flinch and the other div inside primary which is at 60% now takes up the all screen.

The classes are correctly selected i tested that with background color just to be sure.

I've been trying to figure this out some time hope and it's probably going to be something stupid. Nevertheless thank you so much for your time and knowledge :) #hi5

Edit:

html 
/* formatting a bit off don't know why*/ 
    <div class="primary-content t-border">
        <p>textextextextextblablabla</p>
        <a href="#">Find out more</a>
            <div class="wildlife">
                <h2>Check out all the Wildlife</h2>
                 <p>textextextextextblablabla</p>
            </div>            
            <a href="#">See the Wildlife</a>
    </div>

css

.primary-content, /*irrelevant, i'ts only to show all the code being addressed to this div*/ 
.main-header {
    text-align: center;
}

.primary-content,  /*affecting both contents*/ 
.secondary-content {
    width: 60%
    margin: auto;
}

.wildlife {
    color: white;
    background-color: #434a52;
    padding: 18% 24%;
    border-top: 10px solid #ffa949;
    margin: 105px 0 60px;
}

I've went to chrome dev tools and found out that the padding is acting crazy. It's as is:

css

.wildlife{
     padding: 18% 24%;
}

But checking on chrome dev tool it's like this - link

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

At the bottom of this page is a link to the Markdown Cheatsheet which will help you with tips on how to post your code. To be able to help you in the most efficient way, we're going to need to see the code. Both the HTML and the CSS :)

Marcos Boaventura
Marcos Boaventura
4,168 Points
Marcos Boaventura
Marcos Boaventura
4,168 Points

Hey Jennifer Nordell thanks for the heads up and for your help :)

I've edited the original post with more info as you suggested. It seems the root of the problem is the padding, at least inspecting it on chrome showed weird results - link

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Is there a normalize.css in this project? If so, it should come before your custom CSS file. I'm wondering if that might have something to do with it as it removes browser default padding among other things. I'm also curious as to exactly what your "secondary-content" class connects to and if you see any difference when you change the margin line to this:

margin: 0 auto;

4 Answers

Evan Demaris
Evan Demaris
64,262 Points

Hi Marcos,

You're missing the semicolon after width: 60%.

Hope that helps!

Marcos Boaventura
Marcos Boaventura
4,168 Points
Marcos Boaventura
Marcos Boaventura
4,168 Points

Hey Evan,

Didn't even remembered this problem. Just opened the link and bam! Right on front of me was the missing semicolon. Thanks!

Marcos Boaventura
Marcos Boaventura
4,168 Points
Marcos Boaventura
Marcos Boaventura
4,168 Points

This project doens't have a normalize.css. Your suggestion didn't had any effect and it should have. It's so strange. I'm going to retake some steps from the previous 2 or 3 videos and see what happens. I've been messing with the padding and margins and the results are off.

The secondary content is just some texts and links and although i can change it's background (proving it's not just a typo or something) the text doesn't move at all with the margin set to 0.

But out of curiosity if you want to take a look:

html

/* indentation is off because i'm using sublime text and for some reason it doesn't paste well*/ 
        <div class="secondary-content t-border">
      <h3>From Tents to Resorts</h3>
      <p>
        Lake Tahoe is full of wonderful places to stay. You have the ability to sleep in the outdoors in a tent, or relax like a king at a five star resort. Here are our top three resorts:
      </p>
      <ul>
        <li><a href="#">Lake Tahoe Resort Hotel</a></li>
        <li><a href="#">South Lake Tahoe Resorts</a></li>
        <li><a href="#">Tahoe Ski Resort Lodging</a></li>
      </ul>         
      <h3>Pack Accordingly</h3>
      <p>
        One of most important things when it comes to traveling through the great outdoors is packing accordingly. Here are a few tips:
      </p>
      <ol>
        <li>Bring layers of clothing</li>
        <li>Pack sunscreen</li>
        <li>Carry extra water just in case</li>
        <li>Pack light</li>
      </ol>
        </div>

        <footer id="main-footer" class="t-border">
            <p>All rights reserved to the state of <a href="#">California</a>.</p>
            <a href="#top">Back to top &raquo;</a> 
        </footer>
  </body>
Roger Schaeffer
Roger Schaeffer
2,144 Points
Roger Schaeffer
Roger Schaeffer
2,144 Points

Just a quick side not /* is only for comments in css. */ Whereas <!-- is the comment tag in html -->

Using the wrong comment tag in the wrong file type can cause some very weird errors.