Element is being pushed outside from background image-CodePudding

* {

  margin: 0;

  padding: 0;

}

.background-image {

  background-image: url("https://solscan.io/static/media/banner-header-1.c1e47687b38c8afc4f948ebd7004acf8.svg");

  background-repeat: no-repeat;

  background-position: center top;

  height: clamp(150px, 15vh, 20vh);

  width: 100vw;

  background-size: cover;

  position: absolute;

  top: 0;

  right: 0;

  z-index: - 1;

}

.nav-bar {

  position: relative;

  z-index: 2;

  margin: 1.2rem 0.8rem;

  display: flex;
  align-items: center;

justify-content: space-between;

}

.logo {

  display: flex;

  

}

i {

  font-size: 29px;

  color: black;

}

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <link rel="stylesheet" href="style.css">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE 4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"

  />

  <title>Page title</title>

</head>

<body>

  <div ></div>

  <header >

    <nav >

      <img src="https://solscan.io/static/media/logo-solana-scan.ae03f445fd27dddc90c859d8728cbb44.svg">

      <div >

         <img src="https://solscan.io/static/media/solana-sol-logo.b612f1402147c92338bed5af1879b175.svg"> 

        <i ></i>

      </div>

    </nav>

  </header>

</body>

</html>

The div with class logo is being pushed out from background image and can't figure out why the above is the html and css I am using. Would be glad if anyone could describe what the cause of problem is. I also tried giving width to nav bar it worked but still need to know cause of problem, thanks in advance!

The image is pushing the i tag to outside if I add any other text it doesn't push it I don't know what's the image tag doing.

CodePudding user response：

Set a margin on the .logo class, like margin:0 2rem 0 -2rem;

* {
  margin: 0;
  padding: 0;
}

.background-image {
  background-image: url("//solscan.io/static/media/banner-header-1.c1e47687b38c8afc4f948ebd7004acf8.svg");
  background-repeat: no-repeat;
  background-position: center top;
  height: clamp(150px, 15vh, 20vh);
  width: 100vw;
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}



.nav-bar {
  position: relative;
  z-index: 2;
  margin: 1.2rem 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}


.logo {
  display: flex;
  flex-direction:row;
  margin:0 2rem 0 -2rem;
}

i {
  font-size: 29px;
  color: black;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" integrity="sha512-xh6O/CkQoPOWDdYTDqeRdPCVd1SpvCA9XXcUnZS2FmJNp1coAFzvtCN9BmamE 4aHK8yyUHUSCcJHgXloTyT2A==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>

<div ></div>
<header >
  <nav >
    <img src="//solscan.io/static/media/logo-solana-scan.ae03f445fd27dddc90c859d8728cbb44.svg" />
    <div >
      <img src="//solscan.io/static/media/solana-sol-logo.b612f1402147c92338bed5af1879b175.svg" />
      <i ></i>
    </div>
  </nav>
</header>