同じCSSコードなのにスマホ画面になると片方だけはみ出る問題を解決したいです

Question

同じなのにスマホ画面になると片方だけはみ出る問題を解決したいです。パソコン画面では問題が起こらないのですが、スマホ画面になると横にはみ出てしまいます。レスポンシブ対応されているせいか横にもスライドできません。
問題点と解決策を教えていただけると助かります！！

問題のページのコード
<div class=lesson>
    <div class=lesson>
        <div class=explane>
            <h2><br>第1位「ソードアートオンライン」<u>←イチオシ！</u></h2>
            <p><u>*アニメ有</u></p>
        </div>
<p class=text-contents><br>
    クリアするまで脱出不可能、ゲームオーバーは本当の“死”を意味する──。謎の次世代MMO『ソードアート・オンライン（SAO）』の“真実”を知らずログインした約一万人のユーザーと共に、その過酷なデスバトルは幕を開けた。　SAOに参加した一人である主人公・キリトは、いち早くこのMMOの“真実”を受け入れる。そして、ゲームの舞台となる巨大浮遊城『アインクラッド』で、パーティを組まないソロプレイヤーとして頭角をあらわしていった。　クリア条件である最上階層到達を目指し、熾烈な冒険（クエスト）を単独で続けるキリトだったが、レイピアの名手・女流剣士アスナの強引な誘いによって彼女とコンビを組むことになってしまう。その出会いは、キリトに運命とも呼べる契機をもたらし……。果たして、キリトはこのゲームから抜け出すことができるのか。　第15回電撃小説大賞＜大賞＞受賞作『アクセル・ワールド』の著者・川原礫！
</p></div>
<div class=lesson-icon>
    <p><b>小説版</b></p>
    <ul>
        <li>Amazon</li>
<iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="https://rcm-fe.amazon-adsystem.com/e/cm?ref=qf_sp_asin_til&t=syuutsumu-22&m=amazon&o=9&p=8&l=as1&IS1=1&detail=1&asins=4048677608&linkId=00e4e5436897f73fab1a42a7a811c786&bc1=ffffff&amp;lt1=_top&fc1=333333&lc1=0066c0&bg1=ffffff&f=ifr">
</iframe>

<li>楽天</li>
<!-- START MoshimoAffiliateEasyLink -->
<script type="text/javascript">
    (function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject=a;
    b[a]=b[a]||function(){arguments.currentScript=c.currentScript
    ||c.scripts[c.scripts.length-2];(b[a].q=b[a].q||[]).push(arguments)};
    c.getElementById(a)||(d=c.createElement(f),d.src=g,
    d.id=a,e=c.getElementsByTagName("body")[0],e.appendChild(d))})
    (window,document,"script","//dn.msmstatic.com/site/cardlink/bundle.js?20210203","msmaflink");
    msmaflink({"n":"ソードアート・オンライン1アインクラッド （電撃文庫） [ 川原　礫 ]","b":"","t":"","d":"https://thumbnail.image.rakuten.co.jp","c_p":"","p":["/@0_mall/book/cabinet/7608/9784048677608.jpg"],"u":{"u":"https://item.rakuten.co.jp/book/6033257/","t":"rakuten","r_v":""},"b_l":[{"id":1,"u_tx":"楽天市場で見る","u_bc":"#f76956","u_url":"https://item.rakuten.co.jp/book/6033257/","a_id":2500763,"p_id":54,"pl_id":27059,"pc_id":54,"s_n":"rakuten","u_so":1}],"eid":"hZrJv","s":"s"});
    </script>
    <div id="msmaflink-hZrJv">リンク</div>
    <!-- MoshimoAffiliateEasyLink END -->
<br>
</ul>
<p><b>動画版</b></p>
<ul>
  <br><b><li><a href=https://amzn.to/38lQpgX>Amazon　Prime Video</a>←<b>30日間無料体験！</b></li></b>
    <br><li>順次追加予定</li>
    </ul>


</div>

成功しているコード
<div class=lesson>
<div class=lesson>
<div class=explane>
    <h2>第1位「弱キャラ友崎くん」 ←<u>イチ推し！</u></h2></div>
    <p><u>*アニメ有</u></p>
<p class=txt-contents><br>これが人生（クソゲー）攻略の最前線！

    人生はクソゲー。このありふれたフレーズは、残念ながら真実だ。
    
    だって、人生には美しくシンプルなルールがない。あるのは理不尽と不平等だけ。自由度が高いなんてのは強者の言い分で、弱者には圧倒的に不利な仕様でしかない。
    
    だから、クソゲー。
    あまたのゲームに触れ、それらを極めてきた日本屈指のゲーマーである俺が言うんだから間違いない。
    
    ――だけどそいつは、俺と同じくらいゲームを極めてなお、「人生は神ゲー」と言いきった。
    
    生まれついての強キャラ、学園のパーフェクトヒロインこと日南葵。
    しかも、「この人生（ゲーム）のルールを教えてあげる」だって？　
    
    ……普通は、そんなの信じない。
    だけど日南葵は、普通なんて枠にはまったく嵌まらないやつだったんだ！　
    
    第10回小学館ライトノベル大賞優秀賞受賞作。弱キャラが挑む人生攻略論ただし美少女指南つき！
    これが人生（クソゲー）攻略の最前線！

人生はクソゲー。このありふれたフレーズは、残念ながら真実だ。

だって、人生には美しくシンプルなルールがない。あるのは理不尽と不平等だけ。自由度が高いなんてのは強者の言い分で、弱者には圧倒的に不利な仕様でしかない。

だから、クソゲー。
あまたのゲームに触れ、それらを極めてきた日本屈指のゲーマーである俺が言うんだから間違いない。

――だけどそいつは、俺と同じくらいゲームを極めてなお、「人生は神ゲー」と言いきった。

生まれついての強キャラ、学園のパーフェクトヒロインこと日南葵。
しかも、「この人生（ゲーム）のルールを教えてあげる」だって？　

……普通は、そんなの信じない。
だけど日南葵は、普通なんて枠にはまったく嵌まらないやつだったんだ！　

第10回小学館ライトノベル大賞優秀賞受賞作。弱キャラが挑む人生攻略論ただし美少女指南つき！
</p>
</div>
<div class=lesson-icon>
    <p><b>小説版</b></p>
    <ul>
        <li>Amazon</li>
        <iframe style="width:120px;height:240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="https://rcm-fe.amazon-adsystem.com/e/cm?ref=tf_til&t=syuutsumu-22&m=amazon&o=9&p=8&l=as1&IS1=1&detail=1&asins=B01FTIQP4W&linkId=36ec6669a5cd5e1096c53b2b3ac3aa9d&bc1=ffffff&amp;lt1=_top&fc1=333333&lc1=0066c0&bg1=ffffff&f=ifr">
        </iframe>
        <li>楽天</li>
        <!-- START MoshimoAffiliateEasyLink -->
<script type="text/javascript">
    (function(b,c,f,g,a,d,e){b.MoshimoAffiliateObject=a;
    b[a]=b[a]||function(){arguments.currentScript=c.currentScript
    ||c.scripts[c.scripts.length-2];(b[a].q=b[a].q||[]).push(arguments)};
    c.getElementById(a)||(d=c.createElement(f),d.src=g,
    d.id=a,e=c.getElementsByTagName("body")[0],e.appendChild(d))})
    (window,document,"script","//dn.msmstatic.com/site/cardlink/bundle.js?20210203","msmaflink");
    msmaflink({"n":"弱キャラ友崎くん Lv．1 （ガガガ文庫） [ 屋久 ユウキ ]","b":"","t":"","d":"https://thumbnail.image.rakuten.co.jp","c_p":"","p":["/@0_mall/book/cabinet/6104/9784094516104.jpg"],"u":{"u":"https://item.rakuten.co.jp/book/13909309/","t":"rakuten","r_v":""},"b_l":[{"id":1,"u_tx":"楽天市場で見る","u_bc":"#f76956","u_url":"https://item.rakuten.co.jp/book/13909309/","a_id":2500763,"p_id":54,"pl_id":27059,"pc_id":54,"s_n":"rakuten","u_so":1}],"eid":"52AE5","s":"s"});
    </script>
    <div id="msmaflink-52AE5">リンク</div>
    <!-- MoshimoAffiliateEasyLink END -->
    </ul>
    <p><b>動画版</b></p>
    <ul><li><a href=https://amzn.to/2N3vLuK>Amazon　Prime Video</a>←<b>30日間無料体験！</b></li></ul>
    <br><li>順次追加予定</li></ul>


</div>

コード
.header{height:90px}
.header-logo{font-size: 38px;
    text-align: center;
    background-color:rgba(0, 0, 0, 0.5);
    background-repeat: repeat;
background-size: cover;
color:white;
padding: 20px 40px;

}

body{background-color: rgba(220, 220, 220, 0.452);
}


.header-list{
             font-size: 15px;
             float: right;
             padding:15px;
             padding-top:130px;
            
            }
            
.genre {padding: 15px;
       float:left;
        background-color: white;
        border-radius: 10px 20px 30px 40px;
    }
h1{text-align: center;}
.genre{padding: 15px;
    float:left;}
    .explain{text-align: center;}
  .hyouji{float:right;}

  .Big{text-align: center;}
@media(max-width:460px){
    .setsumei{padding-left:40px;}

    .explaine{width:60%;
    text-align: center;
    float: center;
    }

    .header{width:100%;}

    .explaine h1{font-size:15px ;
    }

    .header-logo{font-size: 30px;
        background-repeat: repeat;
    background-size: cover;
    float:center;
    }

    .genre li{float:left;
    font-size:15px;
margin: 15px![;}

.l](c79b806699471ebbf17c6ff24c5f537c.png)esson-icon{size:50%;}
   }

1枚目：問題のページ

2枚目：成功しているページ

Comments

[Lhankor_Mhy]

友崎くん面白いっすよね……

それはそれとして、ご提示のコードを試してみましたが、タイトルがはみ出ることはありませんでした。
つまり、問題が再現しませんでした。
おそらく、ご提示いただいていない部分に原因があると思われます。

問題が再現するコードをご提示ください。

[sasanuse]

CSSコード追加しました！

[Lhankor_Mhy]

やはり問題が再現しません。

質問に提示するコードで問題が再現することを、ご質問者の環境で確認してから質問をしてください。
それぞれが違うコードを見ながら違う現象について議論をするのは、お互いに時間の無駄ではありませんか？
https://twitter.com/lhankor_mhy/status/1169432868705075200

[sasanuse]

そ...そんな(´;ω;｀)
スマホ画面で見るとはみ出ているんですよね...こればっかりは友人も確認しているので問題があることは間違いないのですが...

[Lhankor_Mhy]

とはいえ、ご提示いただいているのはコードの断片ですよね？

headタグとか記載されていないので、その部分はこちらの想像で補っているのです。
ですので、そのあたりに原因があるのでは？　ということです。

[Lhankor_Mhy]

その、ご友人が確認したページをご提示いただくのが、一番手っ取り早いですね。

[Lhankor_Mhy]

解決してよかったですね

[dit.]

解決している　ということですが、「問題のページ」「成功しているページ」ともにHTMLの構造でおかしな部分があるようです。
閉じタグの過不足やul直下の許可されていない要素などご確認ください。
（.explaneの閉じタグの位置も違います）

Answer 1

CSSコード欄にある.hyouji{float:right;}を消して、media内に.hyouji{padding-left:15px;}を追加したらスマホでも正しく表示されました！