jsfiddle в России не работает.
Т.е. помочь вам могут либо находящиеся не в России либо те, кому не лень включать VPN.
Если вас устраивает такая "аудитория", то можете продолжать с jsfiddle.
Иван Куликов, ко всему вышесказанному: и вместо таблицы (<table>) тоже сотворите грид. Таблицами сетку делали только в начале века.
Сейчас их используют только для верстки табличных данных.
Сначала нужно убедиться в том, что вам действительно нужны отдельные псевдоэлементы, а не, например, множественные фоны.
Если всё таки нужны именно они, то да, придется городить лишние элементы.
Хотелось бы знать, как bg связан с выравниванием текста внутри кнопки...
Впрочем вопросов на самом деле больше.
Например, зачем для каждой кнопки по два селектора, когда достаточно одного?
Какая вообще разметка?
И почему это кнопки, а не ссылки?
Но черт с ними с вопросами.
Короче:
делаете две кнопки (вероятнее ссылки)
задаете каждой по два класса
в первом, одинаковом для обеих, пишете одинаковые свойства
во втором, классе-модификаторе, разном для разного вида кнопок, пишете отличающиеся свойства типа цветов.
Но теперь могу margin с отрицательными значениями выровнять вверх. Но это не то, что я хотел
Вот ведь...
Вы двигали её зачем-то margin'ом, у вас не работало.
Я вам сказала как починить.
Теперь вам не нравится, что margin работает.
Думаю, что вам пришла пора начать изучение гридов. А по дороге флексов и позиционирования.
Инлайн-блоками перестали верстать уж скоро лет 10.
По дороге нужно определиться, будет ли эта тетка заменена на реальную фотографию. Если нет, то это не img в обертке, а псевдоэлемент. И позиционировать нужно его.
Вообще, инлайновые стили перебиваются с помощью !important
Но разумнее почитать документацию к слайдеру и указать ему подходящие настройки так, чтобы не было нужды пользоваться important. Например, css mode.
Потому что так, как вы хотите, флексы не умеют.
Т.е. нужно
- либо задать высоту для .card и потом поделить пополам для каждого блока
- либо считать на js
- либо использовать гриды