Как в MJML задать ширину одной колонке?

Question

[Антон Литвиненко]

Всем привет.

Встала задача с помощью mjml сверстать несколько шаблонов писем, до этого с mjml не сталкивался.

В документации сказано, что нельзя использовать пустые колонки для отступов:

Columns are meant to be used as a container for your content. They must not be used as offset. Any mj-element included in a column will have a width equivalent to 100% of this column's width.

А у меня уже 2 места где пришлось использовать:

1. шапка, где логотип мне пришлось разделить по горизонтали, в первом ряду у меня 3 колонки, во втором 2, для того чтобы логотип был одного размера:

<!--header with logo -->
<mj-section padding="0px" background-color="#fff" full-width="full-width">

	<mj-group>

		<mj-column vertical-align="middle" width="78%" padding="0px">
			<mj-image align="left" padding="0" width="115px" src="img/logo-top.jpg" href="#1" alt=""></mj-image>
		</mj-column>

		<mj-column width="11%" padding-top="16px" padding-bottom="15px" vertical-align="middle"  border-left="1px solid #ccc">
			<mj-image padding="0px" width="25px" align="center" src="img/icon_star.png" href="#1" alt=""></mj-image>
		</mj-column>
		
		<mj-column width="11%" padding-top="16px" padding-bottom="15px" vertical-align="middle" border-right="1px solid #ccc" border-left="1px solid #ccc">
			<mj-image padding="0px" width="25px" align="center" src="img/icon_acc.png" href="#1" alt=""></mj-image>
		</mj-column>

	</mj-group>

</mj-section>
<!--header with logo -->

<!--bottom part of logo -->
<mj-section padding="0px" background-color="#B50070" full-width="full-width">
	<mj-column vertical-align="middle" width="70%" padding="0px">
		<mj-image align="left" padding="0" width="115px" src="img/logo-bottom.jpg" href="#1" alt=""></mj-image>
	</mj-column>
	<mj-column width="30%"></mj-column>
</mj-section>
<!--bottom part of logo -->

2. в нижней части письма, где у меня есть группа иконок, и они должны занимать половину ширины:



просто задать ширину одной колонке почему-то не работает, она все равно тянется на 100%

<!--social-section -->
<mj-section padding="0px" background-color="#231F20" full-width="full-width">

	<mj-column width="50%">

		<mj-table>
			<tr style="list-style: none;line-height: 1">
				<td>
					<a href="#1">
						<img width="36" src="img/icon-fb.jpg" />
					</a>
				</td>
				<td>
					<a href="#1">
						<img width="36" src="img/icon-ghost.jpg" />
					</a>
				</td>
				<td>
					<a href="#1">
						<img width="36" src="img/icon-inst.jpg" />
					</a>
				</td>
				<td>
					<a href="#1">
						<img width="36" src="img/icon-yt.jpg" />
					</a>
				</td>
			</tr>
		</mj-table>

	</mj-column>

	<mj-column width="50%"></mj-column>

</mj-section>
<!--social-section -->

песочница
https://mjml.io/try-it-live/rJ8Ud_6cI

Есть решение для задания ширины одной колонке?