Width = 100% CSS property doesn't work on mobile. Seems like Viewport gets wrong Width

Question

I recently launched this website. In mobile view, the header doesn't cover the whole screen width, instead it has a margin on the right side. I can't find the solution to make it work both on desktop and mobile.

This is the viewport setting

    <meta name="viewport" content="width=device-width, initial-scale=1">

The url is camisite.now.sh

Here is my CSS, the object is simply a header with no class. I tried changing for 100vw but it is roughly the same. I think viewport-width might be setting the wrong width.

@font-face{
  font-family: songenia;
  src:url("songenia.otf")
}

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


body {
    font-family: songenia;
    font-size: xx-large;
    background-image: url(background.jpg);
    line-height: 1.2;
}

.input{
  line-height: 1.6;
  margin-top: 30px;
}

  .posts {
    list-style: none;
  }

  .onepost {
  padding: 10px;
  background: rgba(215, 177, 88, 0.548);
  margin: 30px 0;
}

header {
  background: rgba(215, 177, 88, 0.548);
  padding: 2rem;
  min-width: 100%;
  text-align: center;
}

h1, h4 {
  text-align: center;
}


.error-message {
  text-align: center;
}

.input {
  margin-top: 30px;
  font-size: large;
}

    main {
    margin: auto;
    width: 500px;
    overflow: auto;
    padding: 3rem 2rem;
  }

    .post-form {
    padding: 2rem;
    background:rgba(215, 177, 88, 0.548);
  }

    .post-form label {
    text-align: center;
    display: block;
  }

    .post-form input[type='text'] {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border-radius: 5px;
    color: black;
    border: 1px solid #ccc;
  }

    .btn {
    display: block;
    width: 100%;
    padding: 10px 15px;
    border: 0;
    background:rgba(25, 17, 68, 0.644);
    color: #fff;
    border-radius: 5px;
    margin: 5px 0;
  }

  .btn:hover {
    background: rgba(215, 177, 88, 0.548);
  }

Answer 1

I see your problem now. It's because of the way your .post-form is made. In mobile mode, the form extends past the viewport. You have two solutions
1. change the behaviour of .post-form
2. adapt the width of header
For option 1, in styles.css:75 for main, the rules are

main {
    margin: auto;
    width: 500px;
    overflow: auto;
    padding: 3rem 2rem;
}

The 500px is causing your problem, you can just get rid of it. If your mobile phone width is less than 500px, then main will "spill out" past your viewport while your header doesn't do this. Its width stays at 100% of the viewport width.
For option 2, you can make a CSS rule which makes the width 500px when the screen is smaller than 500px

@media only screen and (max-width: 500) {
  header {
    min-width: 500px;
  }
}