Twitterを埋め込み、iphoneで開くと横にはみ出る

Question

はじめてHPを作成を行なっている所です。

twitterを埋め込みましたが
iphoneでSafariを使って表示させると、
添付写真のように右側が切れてしまいます。
(Androidでは切れることなく表示できました。)

<div class="twitter">
	<a class="twitter-timeline" data-width="800" data-height="500" href="https://twitter.com/〇〇?ref_src=twsrc%5Etfw">Tweets by 〇〇</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

@media (min-width:375px) and (max-width: 550px){
.twitter{
	width: 95%;
	margin: 0 auto;
	margin-top:10px;
	margin-bottom: 30px;
}
.twitter-timeline{
    width: 300px!important;
    padding-left:-40px !important;
}
}

右端が切れることなく全部を表示させたいのですが、
どのようにしたら良いのでしょうか？
アドバイスを頂けましたら幸いです。
よろしくお願いたします。