Why the header doesn't complete 100% of the page when I zoom?-CodePudding

Why my header isn't taking the whole page when I zoom and slide to right side ? When I zoom seems like the header isn't taking all the page and that's kinda weird...

Using full page in snippet mode and zoom to 400/500% and slide do right side, that will show the problem I mentioned.

body {

    margin: 0;
    padding: 0;
    width: 100vw;
    height: 100vh;
    background-color: #172424;
}

header {

    width: 100vw;
    background-color: #5fb5dd;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header div {

    display: flex;
    align-items: center;
}

nav ul {

    display: flex;
    list-style: none;
}

nav ul li {

    margin: 0 10px;
}

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Canvas</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <div>
                <img src="" alt="logo-img">
                <h1>some text</h1>
            </div>
            <nav>
                <ul>
                    <li>text</li>
                    <li>text</li>
                    <li>text</li>
                    <li>text</li>
                </ul>
            </nav>
        </header>
    </body>
</html>

CodePudding user response：

body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  background-color: #172424;
}

header {
  width: 100vw;
  background-color: #5fb5dd;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

header div {
  display: flex;
  align-items: center;
}

nav ul {
  margin-right: 31px;
  display: flex;
  list-style: none;
}

nav ul li {
  margin: 0 10px;
}

@media screen and (max-width: 500px) {
  header {
    flex-wrap: wrap;
    justify-content: center;
  }
}

<!DOCTYPE html>
<html lang="en">
    <head>
    <!-- Always remember to add this three lines if you need reponsiveness -->
    <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 rel="stylesheet" href="style.css">
    </head>
    <body>
        <header>
            <div>
                <img src="" alt="logo-img">
                <h1>some text</h1>
            </div>
            <nav>
                <ul>
                    <li>text</li>
                    <li>text</li>
                    <li>text</li>
                    <li>text</li>
                </ul>
            </nav>
        </header>
    </body>
</html>

See this code just did some few changes. You always need to use media query for responsive site