Untitled

HTML:
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <!-- Load icon library -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <title>First Website</title>
    </head>
<body>


    <div class="nav-container">
        <header>
            <a href="index.html" class="logo">ZoCo</a>

            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Finder</a></li>
                    <li><a href="#">Store</a></li>
                    <li><a href="#">About Me</a></li>
                </ul>
            </nav>
        </header>
        <div class="social-header">
            <ul>
                <li><a href="#"><img src="img/Twitter.png" alt="Twitter"></a></li>
                <li><a href="#"><img src="/img/Insta.png" alt="Instagram"></a></li>
                <li><a href="#"><img src="/img/Youtube.png" alt="Youtube"></a></li>
            </ul>
        </div>
    </div>
    <div class="bg">
        <div class="content">
          <h1>Lol</h1>
          <img src="img/yugi.png" alt="Yugi">
        </div>
      </div>


</body>
</html>

CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;700&display=swap');

body {
  height: 100vh;
  margin: 0;
  font-family: 'Poppins', 'arial';
}
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
img {width: 100%;}
.nav-container {
  background: #323299;

  a {
    color: white;
  }
}
header {
    display: flex;
    justify-content: space-between;
    padding: 2em;

    .logo {
      font-weight: bold;
    }

    nav {
      float: right;

      ul{
        display: flex;

        a {
          display: block;
          padding: 0 2em;
        }
      }
    }
}
.social-header, .bg-design {
  display: none;
}
.bg {
  background: #9359C7;
  color: white;
  display: grid;
  text-align: center;
  height: 764px;
  width: 1280px;
}

.content {
  position: relative;
}

.content img {
  width: auto;
  height: auto;
  position: absolute;
  right: -178px;
  bottom: 0;
}