Question 45628 in CSS Question posted in
Some basic documentation can be found here.

Im designing my webpage and was wondering if anyone can tell me how this sidebar on the left got here and possibly how to get rid of it in 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>

The sidebar on the left wasn’t intended to be here, I’ve played with container for these columns and the scroll-Div, scroll-BG, and scroll-object classes and haven’t gotten anywhere. This is all my css code so far. Thanks in advance.

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;
    
}

I tried to remove the sidebar on the left, Its yellow. I cant find in my code where its coming from.enter image description here

Tags:

2

Answers


  1. 0

    The yellow sidebar is there because you have a div with a class="scroll-bg"
    So, remove the scroll-bg section from your css and its reference from your html.

    ### Remove ####
.scroll-bg {
    background-color: yellow;
    width: 375px;
    margin: 10% auto;
    text-align: center;
}

    Working example – https://jsbin.com/wubuqolumo/edit?html,css,output

    Login or Signup to reply.
  2. 0

    what a mess.

    You are pushing every div from left by giving it a margin of 6.5%.
    Change .container div(means every div inside container will have a 6.5% marging from left) to .container and remove margin. And add left right margin in every col class.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search