Navbar links extend offscreen-CodePudding

I am trying to code a Navbar using HTML and CSS. When resizing the window, the links extend off the right side of the viewport. They are not moving left, but staying in their current position.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
}

.navbar {
  position: fixed;
  height: 80px;
  width: 2000px;
  background-color: #000;
  line-height: 80px;
}

.navbar .container {
  justify-content: space-between;
}

.navbar__logo {
  color: rgb(34, 204, 57);
  font-weight: 600;
  font-size: 1.2rem;
}

.navbar__logo span {
  color: #fff;
}

.navbar__link {
  color: #fff;
  text-decoration: none;
  padding: 0 10px;
}

.navbar__link:hover {
  color: rgb(34, 204, 57);
  transition: all 0.3s ease;
}

.navbar__link .active a {
  color: rgb(34, 204, 57) !important;
}


/* Utilities */

.container {
  display: flex;
  min-width: 1220px;
  width: 1220px;
  margin: auto;
}

<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>Document</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet" />
  <!-- link rel="stylesheet" href="style.css" / -->
</head>

<body>
  <header>
    <div >
      <div >
        <div >Some<span>Website</span></div>
        <div >
          <a href="#" >Home</a>
          <a href="#" >Home</a>
          <a href="#" >Home</a>
          <a href="#" >Home</a>
          <a href="#" >Home</a>
        </div>
      </div>
    </div>
  </header>
</body>

CodePudding user response：

You're hard coding widths which makes your links shunt off the right hand edge of the screen. Change .navbar to

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;

  background-color: #000;
  line-height: 80px;
}

and .container to

.container {
  display: flex;
}

and it should work.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background-color: #000;
  line-height: 80px;
}

.navbar .container {
  justify-content: space-between;
}

.navbar__logo {
  color: rgb(34, 204, 57);
  font-weight: 600;
  font-size: 1.2rem;
}

.navbar__logo span {
  color: #fff;
}

.navbar__link {
  color: #fff;
  text-decoration: none;
  padding: 0 10px;
}

.navbar__link:hover {
  color: rgb(34, 204, 57);
  transition: all 0.3s ease;
}

.navbar__link .active a {
  color: rgb(34, 204, 57) !important;
}

.container {
  display: flex;
}

<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>Document</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet" />
  <!-- link rel="stylesheet" href="style.css" / -->
</head>

<body>
  <header>
    <div >
      <div >
        <div >Some<span>Website</span></div>
        <div >
          <a href="#" >Home</a>
          <a href="#" >Home</a>
          <a href="#" >Home</a>
          <a href="#" >Home</a>
          <a href="#" >Home</a>
        </div>
      </div>
    </div>
  </header>
</body>

CodePudding user response：

dont use fix properties (px) use (view-width, vw). 100vw means the all the width of the screen. because when you use px it will work just on your screen but on smaller or bigger screens it will break.

vw is relative to the width of the viewport

.navbar { width: 100vw;} https://codepen.io/wtechoud/pen/BaxaByz?editors=1100

if you still doesn't know what vw mean this is a good tutorial to watch: https://www.youtube.com/watch?v=-GR52czEd-0