スマホで表示させると端が切れてしまう

いつも大変お世話になっております。

テーマはbeauti_plusで子テーマを作成してカスタマイズしています。

ヘッダー内にボタンを作成し、表示させるとPCとタブレットではうまく収まってくれるのですが、スマホで表示させた場合に長さが足りず端っこが切れて表示されてしまします。画面下に左右スクロールのバーも出てきてしまう様になってしまいました。

因果関係がわかりませんが、ロゴ画像の上にもスペースが生まれてしまいました。

おこなったカスタマイズは、heder.php内の
<div class="logo">の下に
<a href="tel:00000000000" class="btn-tel">
を追記。

追加CSSに

.btn-tel{
  position: relative;top:20px; left:150px;
  display: block;
  border-radius: 50px;
  color: white;
  font-weight: bold;
  text-align: center;
  background: #b3b3b3;
  padding: 5px 0;
  margin: auto;
  max-width: 250px;
}

と追加。

スマホで表示が切れてしまうのでネットで調べ、
style.cssに

#headbox {
	padding: 0;
	margin: 0;
}

と

/* pc */
@media screen and (min-width: 769px) {
/*ここにpc用スタイルを記述*/
}
 
/* tablet  */
@media only screen and (min-width: 641px) and (max-width: 960px) {
/*ここにtablet用スタイルを記述*/
}
 
/* smartPhone */
@media screen and (max-width: 640px) {
/*ここにスマホ用スタイルを記述*/
}

を追記してみましたが、変化がなく困っています。

どなたか、アドバイスをいただけないでしょうか？
よろしくお願いします。