Web development with CSS and HTML-CodePudding

I'm fairly new to web development and I'm currently facing two problems I can't seem to fix. First of all, is the white strip line/bar that's on top of my website. I played around with the z-index and everything but can't seem to fix it. Secondly, is my two buttons. I created the buttons and gave them an animation that happens when you hover over the buttons but for some reason when I hover over the buttons the animation doesn't work. Below is my index.html code and my styles.css code. Looking forward to the help, thanks!

Below is my CSS and HTML code.

* {
      margin: 0;
      padding: 0;
    }

    #wrapper {
      max-width: 1940px;
      margin: 0 auto;
      padding: 0 5%;
      clear: both;
    }

    .main {
      width: 100%;
      height: 100vh;
      z-index: 5;
      position: relative;
      overflow: hidden;
      background: linear-gradient(to bottom, #000000, #808080);
    }

    html {
      scroll-behavior: smooth;
    }

    h1 {
      position: absolute;
      z-index: 10;
      font-family: fantasy;
      font-size: 150px;
      text-align: center;
      color: #ff1493;
      top: 0;
      bottom: 0;
      left: 0px;
      right: 0px;
      line-height: 750px;
    }

    h2 {
      color: white;
      top: 100px;
      bottom: 0;
      left: 0;
      right: 0;
      position: absolute;
      z-index: 10;
    }

    .btn-1 {
      width: 150px;
      height: 50px;
      border: none;
      color: white;
      background-color: #ff1493;
      border-radius: 4px;
      box-shadow: inset 0 0 0 0 white;
      transition: ease-out 0.3s;
      font-size: 1rem;
      outline: none;
      z-index: 10;
      position: absolute;
      top: 80px;
      bottom: 0;
      left: 1150;
      right: 0;
    }

    .btn-1:hover {
      box-shadow: inset 150px 0 0 0 white;
      cursor: pointer;
      color: #ff1493;
    }

    .btn-2 {
      width: 150px;
      height: 50px;
      border: none;
      color: white;
      background-color: #ff1493;
      border-radius: 4px;
      box-shadow: inset 0 0 0 0 white;
      transition: ease-out 0.3s;
      font-size: 1rem;
      outline: none;
      z-index: 10;
      position: relative;
      top: 150px;
      bottom: 0;
      left: 550;
      right: 0;
    }

    .btn-2:hover {
      box-shadow: inset 150px 0 0 0 white;
      cursor: pointer;
      color: #ff1493;
    }

  <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>HELLOOOO</title>
        <link rel="stylesheet" href="styles.css" />
      </head>
      <body>
        <div >
          <button >home</button>
          <button >about</button>
        </div>
        <div >
          <h1>hi</h1>
        </div>
        <div >
          <h2>hello</h2>
        </div>
        <div ></div>
      </body>
    </html>

CodePudding user response：

First question: White header bar is your <div >.

Second question: Because your 2 buttons exactly is behide your <div ></div>.

Wish this help you by somehow.

* {
      margin: 0;
      padding: 0;
    }

    #wrapper {
      max-width: 1940px;
      margin: 0 auto;
      padding: 0 5%;
      clear: both;
    }

    .main {
      width: 100%;
      height: 100vh;
      z-index: 5;
      position: relative;
      overflow: hidden;
      background: linear-gradient(to bottom, #000000, #808080);
    }

    html {
      scroll-behavior: smooth;
    }

    /* h1 {
      position: absolute;
      z-index: 10;
      font-family: fantasy;
      font-size: 150px;
      text-align: center;
      color: #ff1493;
      top: 0;
      bottom: 0;
      left: 0px;
      right: 0px;
      line-height: 750px;
    }

    h2 {
      color: white;
      top: 100px;
      bottom: 0;
      left: 0;
      right: 0;
      position: absolute;
      z-index: 10;
    } */

    .btn-1 {
      width: 150px;
      height: 50px;
      border: none;
      color: white;
      background-color: #ff1493;
      border-radius: 4px;
      box-shadow: inset 0 0 0 0 white;
      transition: ease-out 0.3s;
      font-size: 1rem;
      outline: none;
      z-index: 10;
      position: absolute;
      top: 80px;
      bottom: 0;
      left: 1150;
      right: 0;
    }

    .btn-1:hover {
      box-shadow: inset 150px 0 0 0 white;
      cursor: pointer;
      color: #ff1493;
    }

    .btn-2 {
      width: 150px;
      height: 50px;
      border: none;
      color: white;
      background-color: #ff1493;
      border-radius: 4px;
      box-shadow: inset 0 0 0 0 white;
      transition: ease-out 0.3s;
      font-size: 1rem;
      outline: none;
      z-index: 10;
      position: relative;
      top: 150px;
      bottom: 0;
      left: 550;
      right: 0;
    }

    .btn-2:hover {
      box-shadow: inset 150px 0 0 0 white;
      cursor: pointer;
      color: #ff1493;
    }

  <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>HELLOOOO</title>
        <link rel="stylesheet" href="styles.css" />
      </head>
      <body>
        <div >
        </div>
        <!--
        <div >
          <h1>hi</h1>
        </div>
        <div >
          <h2>hello</h2>
        </div>
         -->
        <div >
          <button >home</button>
          <button >about</button>
        </div>
      </body>
    </html>