我正在設計我的網頁，想知道是否有人可以告訴我左側的側邊欄是如何到達這裡的以及如何在 CSS 中擺脫它

<!doctype html>
<html>

    <head>
      
      <!--Font Link-->
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
      <!--CSS-->
      <link href="SQIStyle.css" rel="stylesheet" type="text/css">
      <title>Solarquake Studios</title>
      <!--favicon-->
      <link rel="icon" type="image/ico" sizes="128x128" href="Logo.ico"/>

      <style>


      </style>
      
    </head>

    <h1>SolarQuake Studios</h1>

    <header>
      <img src="Logo.ico" alt="logo" width="80" height="80">
    </header>
    
    <body>


      <div class="container">
           <div class="left-col">
               <div class="scroll-bg">
                    <div class="scroll-div">
                     <div class="scroll-object">
                      <h3><u>Games</u></h3>
                      <p>Upcoming Projects</p>
                      <p></p>
                     </div>
                   </div>
               </div>
    
           </div>

           <div class="center-col">
               <div class="scroll-bg">
                    <div class="scroll-div">
                     <div class="scroll-object">
                      <h3><u>Esports</u></h3>
                      <p>The Hog Pen</p>
                     </div>
                    </div>
              </div>
           </div>

           <div class="right-col">
               <div class="scroll-bg">
                    <div class="scroll-div">
                     <div class="scroll-object">
                      <h3><u>Assets</u></h3>
                      <p>Game Art & Designs</p>
                     </div>
                    </div>
               </div>
           </div>

      </div>

      <div class="footer">
        &copy; All Rights Reserved.

        <p class ="secondary">Follow Us!</p>

        <a href="https://www.youtube.com/channel/UChQzAj3OlDO3sqZl7frbY7g"><img src="YTLogo.png" 
         width="70" 
         height="70" 
         alt="logo"></a>

        <a href="https://twitter.com/SQdevelopers"><img src="Twitterlogo.png" 
         width="64" 
         height="64" 
         alt="logo"></a>

      </div>
      
    </body>

</html>

左側的側邊欄本來就不應該出現在這裡，我已經使用了這些列的容器以及scroll-Div、scroll-BG 和scroll-object 類，但沒有取得任何進展。這是到目前為止我所有的 CSS 程式碼。提前致謝。

h1 {
    font-size: 40px;
    line-height: 62px;
    font-family: 'Press Start 2P', cursive;
    text-align: center;
    color: yellow;
    
}

h2 {

    font-size: 40px;
    color: white;
    font-family: 'Press Start 2P', cursive;

}

h3 {

    color: white;

}

header {

    text-align: center;
    padding-bottom: 10px;
}



.container div {
    
    box-sizing: border-box;
    min-height: 250px;
    margin-left: 6.5%;

}

.left-col {
    
    width: 25%;
    float: left;
    text-align: center;
    color: floralwhite;   
    

}

.right-col {

    width: 25%;
    float: left;
    text-align: center;
    color: floralwhite;

}

.center-col {

    width: 25%;
    float: left;
    text-align: center;
    color: floralwhite;
    
}

.footer {

     clear: both;
     text-align: center;
     box-sizing: border-box;
     padding-top: 5px;
     color: yellow;
     font-size: 7px;

}


body {

    font-size: 20px;
    font-family: 'Press Start 2P', cursive;
    background-color: white;
    background-image: url("Space.png");

}

.scroll-bg {

    background-color: yellow;
    width: 375px;
    margin: 10% auto;
    text-align: center;
    

}

.scroll-div {
    
    background: rgb(0, 0, 0);
    height: 400px;
    overflow: hidden;
    overflow-y: scroll;
    text-align: center;

}

.scroll-object {

    color: white;
    font-family: 'Press Start 2P', cursive;
    font-size: 15px;
    text-align: center;
    
}

我試著刪除左側的側邊欄，它是黃色的。我在程式碼中找不到它的來源。在此輸入圖像描述

P粉741223880385 天前391

我正在設計我的網頁，想知道是否有人可以告訴我左側的側邊欄是如何到達這裡的以及如何在 CSS 中擺脫它

全部回覆(2)我來回復