Почему не работает margin-right для таблицы HTML?

Question

[Илья Петров]

Не работает margin-right у таблицы.
На скриншоте у таблицы отступы слева — обертка контента.
Смотрел что на бурже говорят: "добавить фейк обложку, чтобы был отступ".

Но есть один минус — у меня таблица на телефоне должна скроллиться вправо, "фейк обложка не может работать".

Какие варианты есть добавить margin-right?

P.S. transform: translateX(-20px) не работает

<figure class="referral__figure">
	<table class="referral__table referral__table--first">
		<tr>
			<th>E-mail</th>
			<th>Дата регистрации</th>
			<th>Уровень</th>
		</tr>

		<tr>
			<td>[e-mail]</td>
			<td>8 мая 2020 г.</td>
			<td>3</td>
		</tr>

		<tr>
			<td>[e-mail]</td>
			<td>20 июля 2020 г.</td>
			<td>5</td>
		</tr>
	</table>
</figure>

.referral__figure
	margin: 0 -20px
	overflow-x: scroll


.referral__table
	&--first
		margin-left: 20px
		margin-right: 20px       // не работает

Answer 1

[Илья Петров]

Эмитировать margin-right можно с помощью border-right: 20px solid transparent;