Random Button Chunks on Webpage

On the site I am making, the starting chunk of a button has appeared, that I haven’t (to my knowledge) coded for. Further down the page, an ending of the same button size has appeared (they don’t equal a whole). They are the same size, and around the same side of the page, although the one further down is just the ending sticking out from the left of the screen, whereas the one further up is the starting of the button and near a couple of other, proper buttons. The button further up lights up when I hover (this is a feature of the actual buttons), whereas the one further down just cursors (on Chrome, on Safari it lights up).

I checked the code and didn’t see how it could have happened, so I thought it was a glitch. I copy and pasted the html and css into new files, but there was still the random button chunks.

I Googled to see if anyone had a similar problem, but couldn’t find a relevant result.

Ideas? Any help is much appreciated.

<div id="hook-buttons">
        <button id="about" type="submit">About</button>
        <button id="start-2" type="submit">Start</button>
         </div>
        </div>
  <section>
    <div id="about">
      <h1 id="about-h">Blah</h1>
      <p id="about-p">Blah, blah, blah</p>
      <div id="features">
      <div class="feature">
      <h3>Blah</h3>
      <p>Blah, blah, blah/p>
    </div>
    <div class="feature"">
    <h3>Blah</h3>
      <p>Blah, blah, blah</p>
    </div> 
    <div class="feature">
      <h3>Blah</h3>
        <p>Blah, blah, blah/p>
      </div>
      <div class="feature">
        <h3>Blah</h3>
        <p>Blah, blah, blah/p>
       </div>
       <div class="feature">
       <h3>Blah</h3>
      <p>Blah, blah, blah/p>
    </div>
    <div class="feature">
     <h3>Blah</h3>
     <p>Blah, blah, blah</p>
    </div>
    </div>
    </div>
  </section>
#hook-buttons {
        margin-top: 4vh;
      }

#start-2, #about {
    margin: auto 60px;
    width: 15%;
    min-width: 10%;
    border-radius: 50px;
    padding: 15px;
    font-size: 1.7rem;
    background: black;
    color: white;
    cursor: pointer;
    display: inline;
  }

#start-2 {
    margin-left: -1.5vw;
  }

#start-2:hover {
  box-shadow: inset 220px 0 0 0 gold;
  background-position: left;
  transition: 0.2s ease-out;
  color: black;
}

#about:hover {
  box-shadow: inset 220px 0 0 0 gold;
  background-position: left;
  transition: 0.2s ease-out;
  color: black;
}

#start-2, #about, #start-3 {
    margin: auto 60px;
    width: 15%;
    min-width: 150px;
    border-radius: 50px;
    padding: 15px;
    font-size: 1.7rem;
    background: black;
    color: white;
    cursor: pointer;
    display: inline;
    font-weight: bold;
  }
  
  #start-2 {
    margin-left: -1.5vw;
  }
      #about-h {
        font-size: 3.3rem;
        color: white;
        text-align: center;
        margin-top: 7.5%;
      }

    #about-p {
        font-size: 1.6rem;
        max-width: 930px;
        color: white;
        text-align: center;
        vertical-align: middle;
        margin: auto;
      }

    #features {
      display: grid;
      grid-template-columns: 1fr 2fr;
      align-items: center;
      justify-content: center;
      column-gap: 150px;
      row-gap: 100px;
      margin-left: 100px;
      margin-right: 75px;
      margin-top: 73px;
    }
    
      .feature {
      font-size: 23px;
      width: 450px;
      height: 260px;
      background-color: black;
      color: white;
      padding: 25px;
      border-radius: 23px;
      }

First screenshot is by the ‘start-2’ and ‘about’ buttons. Second screenshot is at the end of the ‘features’ section.

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

try right click and inspect, or share a codepen or something like that with code to reproduce the issue

Thank you. Will do. :slightly_smiling_face: