Viewport y sección: igualdad en el height

Hola. Estoy en la costrucción del Formulario de Encuesta, del proyecto de diseño web responsibo.
NO logro establecer la igualdad de height entre la “sección” y el “viewport”.
NO puedo determinar dónde está mi error.
¿Alguien me podría ayudar?

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /><!--Navegador: adapta el viewport al ancho del dispositivo en el cual se abre la imagen-->
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="./css/reset.css" />
  <!--En teoría, este link quita los estilos que el navegador pone por defecto-->
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title id="title">Formulario de Encuesta</title>
  <!--Aquí está css de bootstrap-->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
  <!--Aquí está mi css-editor-->
  <link rel="stylesheet" href="css/main.css" />
</head>

<body>
  <main style="background-color: rgb(166, 206, 211)">
      <div id="navbar">
          <div class="container bg-dark">
              <ul class="nav justify-content-end">
                  <li class="nav-item">
                    <a class="nav-link active text-white" href="#">Nosotros</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link text-white" href="#">Productos</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link text-white" href="#comentario">Comentario</a>
                  </li>
                  
                </ul>
          </div>
      </div>
     
    
    
        
      <div class="container" >
        <section id="welcome-section" >
            <header class="main-header">
                <h1>Formulario de encuesta</h1>
              </header>

Esta es una sección de mi código. En el head puede verse el meta “viewport” y, luego, en el body, la “welcome-section”. Técnicamente, deben tener un widht idéntico, pero probé de varias maneras y no logro una solución.
¿Álguien sabe explicarme la solución en el código?

Donde esta el code? Por favor darnos un link a codepen.

No tengo main.css. La ‘#navbar’ tiene margen, en color naranja, de bootstrap. La página tiene un “viewport” width completo.


Link to codepen:
https://codepen.io/tlc35us/pen/ZEzOxVz?editors=1100