Twitterの埋め込みがスマホで見ると右に余白が出来てしまう問題を解決レスポンシブ対応

スマートフォンで表示した場合Twitterの埋め込みが崩れてしまう問題を解決します。

ツイート埋め込み以外にもスマホで表示するとinline-block要素などのサイズがおかしくなる場合にも同じ方法で解決すると思います。

結論から言うとviewportが正しく設定されていないからです。

スマホ（レスポンシブ）に対応させるには、まずviewportを設定しましょう。

viewportを設定せずにこの記事を見つけた方は、viewportを設定するとページデザインが崩れる場合があるのでテストしてから反映させましょう。

動作確認用のhtmlファイルを用意したのでChromeの検証モード（F12）などで見比べてみてください。検証モードで（ctrl + shitf + M）でデバイスモードを変更できます。
ビューポート無し
 ビューポート有り

スマホモードで見るとviewport有りと無しで表示が変わるのが確認できます。

margin-right: 0; では直らない

CSSや埋め込み要素に差異はないのですが、<head>内にviewportが書かれたmetaタグが入っています。

拡大縮小を許可しない。user-scalable=no

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

こちらは拡大を許可する。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0">

コピペでviewportをhead内に追加してあげることで問題が解決すると思います。