No padding or margin is working on the right side of the page

No padding or margin is working on the right side and I'm not sure if the problem is with the unit vw but changing it didn't work

I'm hoping if you can try the code yourself and see if you can solve it for me being able to have padding or a margin on the right side of the page.

* {
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

header {
  width: 100vw;
  background-color: brown;
  padding: 10px;
}

.logo-name-logo {
  background-color: white;
  display: flex;
  width: 100%;
  margin: 10px;
}

.flexitem {
  border: 3px solid yellow;
  background-color: aquamarine;
  width: 200px;
}

.logo-1 {
  min-height: 100px;
}

.name {
  min-height: 100px;
}

.logo-2 {
  min-height: 100px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Meshal</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>

  <header>
    <div class="logo-name-logo">
      <div class="flexitem logo-1"></div>
      <div class="flexitem name"></div>
      <div class="flexitem logo-2"></div>
    </div>
    <div class="job-title"></div>
  </header>

</body>

</html>

Solution

It's a bit unclear exactly what you want this to look like but my best guess is something like the below snippet. I don't think you need the width: 100vw or width: 100% rules. Block elements are going to take the full horizontal width naturally and forcing them to 100% in this case is probably causing your issue.

Also, if your goal is to distribute flex items equally, please note the flex: 1 1 auto rules instead of setting a static pixel width.

* {
  padding: 0;
  margin: 0;
  overflow-x: hidden;
}

header {
  background-color: brown;
  padding: 10px;
}

.logo-name-logo {
  background-color: white;
  display: flex;
  margin: 10px;
}

.flexitem {
  border: 3px solid yellow;
  background-color: aquamarine;
  flex: 1 1 auto;
}

.logo-1 {
  min-height: 100px;
}

.name {
  min-height: 100px;
}

.logo-2 {
  min-height: 100px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Meshal</title>
  <link rel="stylesheet" href="index.css">
</head>

<body>

  <header>
    <div class="logo-name-logo">
      <div class="flexitem logo-1"></div>
      <div class="flexitem name"></div>
      <div class="flexitem logo-2"></div>
    </div>
    <div class="job-title"></div>
  </header>

</body>

</html>