楽天アフィリエイトをPCとスマホで綺麗に表示させる方法

wordpressで楽天アフィリエイトを設置したはいいが特にスマホ表示だと要素をはみ出てしまって困っている方向けのテクニックとなります
楽天アフィリエイトでは「生成されたHTMLソースの中にタグを追加することは禁止」とされております
なので「CSS」で強引に対応します
このやり方も禁止だったらごめんなさい 

<div class="rakuten-afi">
ここに楽天アフィリエイトーのコードを入れます。
</div>

.rakuten-afi {
}
.rakuten-afi > table {
	border: initial;
}
.rakuten-afi > table > tbody > tr > td {
    display: flex;
	justify-content: center;
	border: initial;
}
.rakuten-afi > table > tbody > tr > td > div > table {
	border: initial;
}
.rakuten-afi > table > tbody > tr > td > div > table > tbody > tr > td {
	border: initial ;
}
.rakuten-afi > table > tbody > tr > td > div > table > tbody > tr > td > p {
    font-size: 24px !important;
}

/*media Queries スマホサイズ（599px）以下で適応したいCSS - スマホのみ
---------------------------------------------------------------------------------------------------*/
@media print, screen and (max-width: 599px) {

.rakuten-afi > table > tbody > tr > td > div {
	width: 97% !important;
}
.rakuten-afi > table > tbody > tr > td > div > table > tbody > tr > td {
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	width: 99% !important;
	box-sizing: border-box !important;
}
.rakuten-afi > table > tbody > tr > td > div > table > tbody > tr > td > p {
    font-size: 16px !important;
}
.rakuten-afi > table > tbody > tr > td > div > table > tbody > tr > td > div > a > div {
	width: initial !important;
	margin-left: 20px !important;
}
	/*-- ここまで --*/
}