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 Konrad Pilch
Konrad Pilch
2,435 Points

Whats wrong with this?

Hello whats wrong with thii code? i copied and paste it to other website and it doesnt align or apply padding bottom. But in other it does

<a href="#contact">
                        <div class="buttonWrapper">
                            <button class="btn btn-warning buttonHeader" onclick="#contact">Contact me</button>
                        </div>
                    </a>

/* Button */
.buttonHeader{
   bottom:0;
   position: absolute;
   padding-bottom:5%;
   left:0;
   right:0;
}
.buttonHeader{
   font-size: 2.5em;
   padding:10px 25px;
   border-radius: 10px;
   background-color:#8E7669;
   border-color:#BDA794;
}
.buttonHeader:hover{
   background-color:#BDA794;
   border-color:#8E7669;
}

1 Answer

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi Konrad,

Here is an excellent CSS-Tricks article about trying to center anything, horizontally or vertically.

Centering in CSS: A Complete Guide

Konrad Pilch
Konrad Pilch
2,435 Points

Hi, yes, i use it all the time margin 0 xd i used that too but it doesnt work. I used a lot of combinations and it strangely it desn't work on this project.

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

What are you trying to do, exactly? Horizontally center the button along the bottom of the page?

Konrad Pilch
Konrad Pilch
2,435 Points

Im trying to put the button horizontaly in center with around 5-10% of padding/margin at the bottom . Above the button theres just h1.

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Here is a Codepen with what I think you're trying to achieve. I left comments in the CSS explaining what I did.

Konrad Pilch
Konrad Pilch
2,435 Points

xd thank you! But i dont understand one thing. Because i coudnt do it so i copied and paste it from my other project . And on that project, the exact same code here did work .

But uh , learning new things :D thank you very much! Really helped ! ^^ :)

Konrad Pilch
Konrad Pilch
2,435 Points

The code doesnt work properly in safari. The code i did on my other project did worked on both some how : p i still wonder.

I changed a bit the cod eyou wrote to 

/* changed this from 0% */
  left:0%;

  right:0;
  width:200px;

and this fix the safari problem button.