容器内部具有宽度的样式按钮

Question

Take a look at http://crashjapan.net - in the sidebar, the Subscribe button (submit element) is staying inside its box, nicely centered, but the three buttons under "I want to help!" (link elements styled like buttons) are too wide. I have looked through the CSS but I can't figure out what is different and what to do to fix it. Can someone else spot the problem?

Answer 1

#secondary .widget .button {
    color: white;
    font-size: 1.2em;
    margin: 0 10% 5px 10%;
    width: 80%;
    text-align: center;
    box-sizing: border-box;
}

This is one possible solution.

Answer 2

Remove this:

margin: 0 10% 5px 10%;

from this in your style.css:

#secondary .widget .button {
    color: white;
    font-size: 1.2em;
    margin: 0 10% 5px 10%;
    width: 80%;
    text-align: center;
}

Answer 3

Edit Your class:

#secondary .widget .button {
    clear: both;
    color: white;
    font-size: 1.2em;
    margin: auto;
    text-align: center;
    width: 78%;
}

Answer 4

Change your button #secondary .widget .button to this:

secondary .widget .button

{     
     color: #FFF;
     font-size: 1.2em;
     margin: 6px 0% 0px -5px !important; 
     margin-top: 0px;                     
     margin-right: 0%;
     margin-bottom: 0px;
     margin-left: 0px;
     width: 70%;
}

6px will leave some space between those buttons. width 70% will be also play a role for the margin. You can try to play the width a bit to see how it looks like.