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

HTML Build a Simple Website Styling Content Writing CSS

Miguel Agawin
Miguel Agawin
3,211 Points
Posted by Miguel Agawin
Miguel Agawin
3,211 Points

.btn margin not working

The '''{margin: 40px 0px;}''' for the class .btn didn't work. I suspect this is caused by the normalize.css which is different from the one used by smellslikebakin.com, which works. I need help identifying what's causing it. Thanks!

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Kyle Meyer - Why does this post with a content tag from the Build a Basic Website course have a category of general instead of html?

4 Answers

James Anwyl
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points
James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

I see what you mean, disabling the margin on .btn doesn't change anything. Are you trying to move the button further down? I just tried messing with it and I'm finding it hard to understand. But here's what I've got so far:

If you remove the padding from .btn you can see its positioned right at the bottom of the #intro div.

The margin-bottom on #intro controls the space between it and the #featured-cupcake and #new-cupcake divs. see this screenshot

Its possible to move the button down the page by adding margin-bottom to the h1 element in style.css (line 12), This needs to be higher than 1em as its already getting margin: 1em 0; from normalize.css.

Your style.css file will look like

h1 {
  font-size: 1.750em;
  letter-spacing: -1.5px;
  margin-bottom: 3em;
}

this will also push the #featured-cupcake and #new-cupcake div's down the page.

Hopefully that helps.

James Anwyl
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points
James Anwyl
.a{fill-rule:evenodd;}techdegree seal-36
James Anwyl
Full Stack JavaScript Techdegree Graduate 49,960 Points

Hi,

What challenge/video are you working on? Can you post your code? Also are you loading normalize.css before you load the rest of your styles? That can cause your styles to be overridden.

Miguel Agawin
Miguel Agawin
3,211 Points
Miguel Agawin
Miguel Agawin
3,211 Points

Hello James, the video is in Build a simple website > Styling content > Writing CSS. The CSS for .btn is supposed to be margin: 40px 0px; but top and bottom doesn't work, only sides. Normalize.css is loaded first.

Miguel Agawin
Miguel Agawin
3,211 Points
Miguel Agawin
Miguel Agawin
3,211 Points

I wanted to identify what was causing it instead of a workaround so I know why the the video tutorial worked while the provided tutorial files didn't. The spacing overall changes when I use the normalize.css used in smellslikebakin.com which is almost 100 lines longer and more importantly the .btn {margin: 40px 0px;} worked.