Button groups shows "ghost margin" on small screens

[merinodesign]

Hi,

I use some button-group at http://www.merinodesign.de frontpage. I want them stacked for small devices, so I used stack-for-small class. On small devices the button-group is stacked, but there is some right "ghost margin". I can´t delete it yet.

Any ideas?

Greetings
Sebastian

[Pautomagi]

The problem seems to be a display:block; that is being added and overwriting display:inline-block;
If you inspect the buttons and select the

element and remove display:block; from the

it looks okay to me.

[merinodesign]

@Pautomagi - I did manually set the display to display:inline-block. The buttons are centered now, but not in full width. I use the following structure. Maybe there is the problem:

div class="row">
div class="large-8 small-centered columns text-center">
ul class="stack-for-small button-group even-2">
li> a href="http://www.merinodesign.de/leistungen/" class="button" title="Meine Leistungen und Angebote">Meine Leistungen /a> /li>
li> a href="http://www.merinodesign.de/ueber_mich/" class="button" title="Werdegang, Ausbildung, Passion">Über Mich /a> /li>
/ul>
/div>
/div>

I removed the starting < for showing the code, sorry...

[FlatspinZA]

If you want full-width buttons on small display, add class "small-12"

[merinodesign]

Got it. I added "small-12" but it didn´t work. Well there was an
'''

.button-group.even-2 li {
    width: 50%;
}

'''
I fixed it with the following css:
'''
@media #{$small-only} {
.button-group.even-2 li {
width: 100%;
}
}
'''

Thanks to all for solve this problem!