HTML Wyrównanie przycisków na całą szerokość

Cześć, znowu mam problem. Chciałbym, aby przyciski były na całą szerokość szarego tła. Jak to zrobić? Demo: Klik! Ma być zgodne z tym: Klik2. Dzięki.

Div o klasie grid-container ma ustawiony padding o wartości .625rem z lewej i prawej, więc masz 3 rozwiązania.
1) Usuń tę klasę
2) Przenieść buttony poza nią
3) Nadaj elementowi z buttonami ujemny margines po lewej i prawej, który będzie równy paddingowi z grid-container, a konkretnie:

.button-group {
  margin-left: -.625rem;
  margin-right: -.625rem;
}

Jeśli usunę klasę grid-container, to panel będzie na całą szerokość strony, a chciałbym żeby był na środku. Po przeniesieniu przycisków poza tą klasę, robią się na całą szerokość strony, czego nie chcę. Przyciski mają być takiej samej szerokości jak panel. Mógłbym najwyżej podpiąć przyciski pod klasę i dodać oddzielną szerokość, ale po coś jest framework.. Wolę nie zmieniać klasy button_group, bo jest z CSS frameworku i będzie tylko dla jednego elementu na stronie (panelu). Jakieś inne rozwiązania? 

Do diva z .button-group dodaj klase grid-margin-x

Działa, ale w między czasie trochę zmodyfikowałem kod pod stylizowanie, więc jakbyś mógł: Demo2. Byłbym wdzięczny.  Podzieliłem jedynie przyciski na dwie kolumny. Mają być złączone, tak jak jest.
Przy okazji, czym różnią się cell small, cell medium i cell large?  Chodzi o urządzenia mobilne?

To stwórz diva nadrzędnego który obejmie grid grid-x z buttonami z klasą grid-margin-x

small-*, large-* określa ilość kolumn jakie zajmie dany element na danej rozdzielczości ekranu. Domyśly grid ma 12 kolumn czyli np.

<div class="small-12 large-6"> left</div>
<div class="small-12 large-6"> right </div>

na ekranach mniejszych niż 1024px bedzie wyglądało to tak

left
right

a powyżej tej szerokości tak:

left right

tutaj masz stronę z dokumentacją tego https://foundation.zurb.com/sites/docs/m...ia-queries

A jak zrobić żeby przyciski leżały na samym dole szarego tła?

Nie wiem czy jest taka możliwość bez nadpisania klasy buttona/edycji, poszukaj w dokumentacji.

Nie wiem czy coś znajdę. Mam teraz kilka pytań.
1. Dlaczego muszę tworzyć oddzielnego div'a grid-margin-x, zamiast podpiąć go pod istniejącego grid-x, który jest w przyciskach? (tylko tak działa)
2. jeśli chcę, żeby kolumna miała zawartość poziomo bez przewijania do następnego wiersza na wszystkich ekranach, mam używać cell small-* ?  Np. chcę, aby miejsca na tekst w panelu były takie jak jest w demie, a nie w jednej linii.
3. Czy SASS jest wymagany do tego frameworku?

1. Bo ktoś tak zaprojektował.
2. Kompletnie nie rozumiem. Narysuj to jakoś albo lepiej opisz.
3. Nie koniecznie. Możesz używać wyłącznie skompilowanego już css

na ekranach mniejszych niż 1024px bedzie wyglądało to tak

left
right

a powyżej tej szerokości tak:

left right

W pytaniu 2 chodziło mi o to, czy używając cell small-12  zawartość będzie w jednej linii na wszystkich ekranach, a nie 
left
right
?

Tak, będzie.
Wystarczy wybrać opcję emulacji urządzeń w dev toolsach przeglądarki lub zmniejszyć/zwiększyć okno przeglądarki aby zobaczyć jak strona się strona zachowuje na różnych rozdzielczościach

Dzięki za odpowiedzi. Przywróciłem przyciski tak jak były w Demo1. Przyciski są dobrze ułożone, jednak problem pojawia się z obramowaniem. Zrobiłem tak: Podgląd. Ta fioletowa linia to obramowanie, która ma odgradzać przyciski. Jednak jak widać na zdjęciu przerwa jest za duża i obramowanie 1px nie wystarcza, a więcej nie dam. Prawie idealna sytuacja była w Demo2, tylko problemem było danie przycisków na sam koniec szarego tła. Jakieś pomysły?

Masz 1px marginesu z prawej strony w lewym buttonie, musisz go usunąć. BTW używaj dev toolsow wtedy bedziesz widział co dzieje się na stronie.

No właśnie używam. Zrobiłem tak w HTML:

<div class="expanded button-group grid-margin-x">
 <a class="button custom">One</a>
 <a class="button custom">Two</a>
</div>

CSS:

.custom {
margin:0;
}

Nie działa. >: (