title: Empty lines between sections/div
body: <p>I am trying to build a responsive static web page using the below HTML and styles. I see there are blank lines between the borders (horizondal) (I am not sure it's from Div or Section) I would like to remove those blank lines, I tried to add margin: 0px and padding: 0px for almost all the elements I used in this styles nothing is working for me.
  Someone, please help me what I'm doing wrong and where I need to make this change in order to remove those white lines</p>
  <p>The highlighted area's lines need to be removed or reduced to look more closer to each sections/divs.</p>
  <p><a href="https://i.stack.imgur.com/qS2bM.png" rel="nofollow noreferrer">Image</a>
  `</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.main_box {
    background: linear-gradient(-45deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.52));
    color: black;
    width: 1150px;
    padding: 10px;
    margin: 5em auto;
    -webkit-border-radius: 15px;
    -moz-border-radius: 5px;
    border-radius: 35px;
    box-shadow: 12px 12px 16px 0 rgba(10, 10, 10, 0.25), -8px -8px 12px 0 rgba(55, 55, 55, 0.3);
  }
  
  .wrap {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .button {
    min-width: 50px;
    min-height: 50px;
    font-family: 'Nunito', sans-serif;
    font-size: 20px;
    letter-spacing: 1.3px;
    font-weight: 700;
    color: #313133;
    background: white;
    border: none;
    border-radius: 1000px;
    box-shadow: 12px 12px 24px rgba(79, 209, 197, .64);
    transition: all 0.3s ease-in-out 0s;
    cursor: pointer;
    outline: none;
    position: relative;
    padding: 6px;
  }
  
  button::before {
    content: '';
    border-radius: 1000px;
    min-width: calc(300px + 12px);
    min-height: calc(50px + 12px);
    border: 6px solid black;
    box-shadow: 0 0 60px rgba(0, 255, 203, .64);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: all .3s ease-in-out 0s;
  }
  
  .button:hover,
  .button:focus {
    color: #313133;
    transform: translateY(-6px);
  }
  
  button:hover::before,
  button:focus::before {
    opacity: 1;
  }
  
  button::after {
    content: '';
    width: 30px;
    height: 30px;
    border-radius: 100%;
    border: 2px solid #00FFCB;
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: ring 1.5s infinite;
  }
  
  button:hover::after,
  button:focus::after {
    animation: none;
    display: none;
  }
  
  @keyframes ring {
    0% {
      width: 30px;
      height: 30px;
      opacity: 1;
    }
    100% {
      width: 100px;
      height: 100px;
      opacity: 0;
    }
  }
  
  #disp_result {
    background: linear-gradient(-45deg, rgba(0, 200, 0, 0.52), rgba(255, 255, 255, 0.52));
    color: #03202C;
    width: 650px;
    padding: 10px;
    margin: 1em auto;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 40px;
    -webkit-box-shadow: 0px 5px 5px -2px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 5px 5px -2px rgba(0, 0, 0, 0.5);
    box-shadow: 12px 12px 16px 0 rgba(20, 30, 40, 50.25), -8px -8px 12px 0 rgba(255, 205, 255, 0.3);
  }
  
  
  /* Div Rows*/
  
  .container {
    height: auto;
    overflow: hidden;
  }
  
  .right {
    width: 420px;
    float: right;
    text-align: justify;
    text-indent: 10px height: 10px;
    word-wrap: break-word;
    margin: 5px;
    padding: 0px;
  }
  
  right:hover::after,
  right:focus::after {
    cursor: pointer;
    transform: translateY(-6px);
  }
  
  .right:hover,
  .right:focus {
    transform: translateY(-6px);
  }
  
  right:hover::before,
  right:focus::before {
    opacity: 1;
  }
  
  right:hover::after,
  right:focus::after {
    animation: none;
    display: none;
  }
  
  input[type="radio"]:not(:disabled)~label {
    cursor: pointer;
  }
  
  label {
    display: block;
    border: none;
    border-radius: 20px;
    padding: 10px;
    margin: 0px;
    text-align: justify;
    position: relative;
    word-wrap: break-word;
    left: 3%;
    cursor: pointer;
    transform: translateY(-6px);
    border: 2px solid hsla(150, 75%, 50%, 1);
  }
  
  input[type="checkbox"]:checked+label {
    background: white;
    padding: 0px;
  }
  
  h1 {
    color: hsl(215, 5%, 10%);
    margin-bottom: 2rem;
  }
  
  h3 {
    color: hsla(215, 5%, 10%, 1);
  }
  
  h2 {
    color: black;
    font-size: 18px;
    text-align: justify;
    margin: 0px;
    padding: 0px;
  }
  
  h5 {
    color: #999;
  }
  
  p {
    font-weight: 60;
    top: -30px;
    left: -10px;
    font-size: 18px;
    text-align: justify;
    margin: 0px;
    padding: 0px;
  }
  
  input[type="checkbox"] {
    display: block;
  }
  
  input[type="checkbox"]:not(:disabled)~label {
    cursor: pointer;
  }
  
  input[type="checkbox"]:checked+label {
    color: black;
  }
  
  input[type="checkbox"]:checked+label::after {
    color: 150, 75%, 45%;
    font-family: 'Nunito', sans-serif;
    border: 5px solid hsl(150, 75%, 45%);
    content: "\2713";
    font-size: 24px;
    position: absolute;
    top: -5px;
    left: -5px;
    transform: translateX(-50%);
    height: 20px;
    width: 20px;
    line-height: 10px;
    text-align: center;
    border-radius: 50%;
  }
  
  section {
    display: flex;
    flex-flow: row wrap;
    margin: 5px;
    padding: 0px;
  }
  
  section&gt;div {
    padding: 1px;
  }
  
  @media only screen and (max-width: 700px) {
    section {
      flex-direction: column;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="main_box"&gt;
    &lt;section&gt;
      &lt;div class="right"&gt;
        &lt;input type="checkbox" id="cb1" name="cb1" value="cb1" style="opacity:0"&gt;
        &lt;label for="cb1" class="main"&gt;
                      &lt;h2&gt;New York&lt;/h2&gt;
                      &lt;p&gt;New York City comprises 5 boroughs sitting where the Hudson River meets the Atlantic Ocean. At its core is Manhattan, a densely populated borough that’s among the world’s major commercial, financial and cultural centers&lt;/p&gt;
                  &lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="right"&gt;
        &lt;input type="checkbox" id="cb2" name="cb2" value="cb2" style="opacity:0"&gt;
        &lt;label for="cb2" class="main"&gt;
                      &lt;h2&gt;Washinton DC&lt;/h2&gt;
                      &lt;p&gt;Washington, DC, the U.S. capital, is a compact city on the Potomac River, bordering the states of Maryland and Virginia. It’s defined by imposing neoclassical monuments and buildings&lt;/p&gt;
                  &lt;/label&gt;
      &lt;/div&gt;
    &lt;/section&gt;
    &lt;section&gt;
      &lt;div class="right"&gt;
        &lt;input type="checkbox" id="cb3" name="cb3" value="cb3" style="opacity:0"&gt;
        &lt;label for="cb3"&gt;
                          &lt;h2&gt;Chicago&lt;/h2&gt;
                          &lt;p&gt;Chicago, on Lake Michigan in Illinois, is among the largest cities in the U.S. Famed for its bold architecture, it has a skyline punctuated by skyscrapers such as the iconic John Hancock Center&lt;/p&gt;
                      &lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="right"&gt;
        &lt;input type="checkbox" id="cb4" name="cb4" value="cb4" style="opacity:0"&gt;
        &lt;label for="cb4"&gt;
                          &lt;h2&gt;Los Angeles&lt;/h2&gt;
                          &lt;p&gt;Los Angeles is a sprawling Southern California city and the center of the nation’s film and television industry. Near its iconic Hollywood sign, studios such as Paramount Pictures, Universal and Warner Brothers offer behind-the-scenes tours&lt;/p&gt;
                      &lt;/label&gt;
      &lt;/div&gt;
    &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>