How can I fix margin issues and div issues in HTML/CSS?

Question

I'm trying to create a blog, however, after adding a dropdown menu sourced from W3Schools everything just went messed up. I'm new at HTML and I don't understand why my margins are messed up.

    body, html {
      height: 100%;
      margin: 0;
      font-family: 'Roboto';
      color: #232323;
      background-color: #ffffff;
      text-align: center;
    }
      .bgimg-1{
      position: relative;
      opacity: 0.8;
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      background-image: url("landingpage.jpg");
      min-height: 100%;
    }
    .navbar {
      overflow: hidden;
      background-color: #333;
    }
    
    .navbar a {
      float: left;
      font-size: 16px;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }
    
    .dropdown {
      float: left;
      overflow: hidden;
    }
    
    .dropdown .dropbtn {
      font-size: 16px;  
      border: none;
      outline: none;
      color: white;
      padding: 14px 16px;
      background-color: inherit;
      font: inherit;
      margin: 0;
    }
    
    .navbar a:hover, .dropdown:hover .dropbtn {
      background-color: #41bc3e;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      width: 100%;
      left: 0;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
    }
    
    .dropdown-content .header {
      background: #41bc3e;
      padding: 16px;
      color: white;
    }
    
    .dropdown:hover .dropdown-content {
      display: block;
    }
    
    .column {
      float: left;
      width: 33.33%;
      padding: 10px;
      background-color: #ccc;
      height: 250px;
    }
    
    .column a {
      float: none;
      color: black;
      padding: 16px;
      text-decoration: none;
      display: block;
      text-align: left;
    }
    
    .column a:hover {
      background-color: #ddd;
    }
    
    
    .row:after {
      content: "";
      display: table;
      clear: both;
    }
    
    @media screen and (max-width: 600px) {
      .column {
        width: 100%;
        height: auto;
      }
    }
    .checked {
        color: orange;
    }
    p {
      margin-right: 600px;
      margin-left: 600px;
    }
    .veryveryinterestingh1 {
      display: flex;
      flex-direction: column;
      justify-content: center;
      text-align: center;
    }
    .verycoolheader {
      background: #232323;
      text-align: center;
    }
    .caption {
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      text-align: center;
      color: #000;
      opacity: 0.99;
    }
    .caption span.border {
      background-color: #111;
      color: #41bc3e;
      padding: 18px;
      font-size: 25px;
      letter-spacing: 2px;
      opacity: 0.99;
    }
    h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
        margin-top: 0;
        margin-bottom: 0;
    }
    ul {
      columns: 2;
      -webkit-columns: 2;
      -moz-columns: 2;
      margin-right: 600px;
      margin-left: 600px;
    }
     @media all and (max-width: 768px){
       body{
         padding-left: 30px !important;
         padding-right: 30px !important;
       }
     }

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font- awesome.min.css" rel="stylesheet"/>
    <div class="verycoolheader"> <img src="logo1.png" alt="Website Logo" align="middle">
    <div class="navbar">
      <a href="index.html">Home</a>
      <a href="sksk.html">About Us</a>
      <div class="dropdown">
        <button class="dropbtn">Blogs
          <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
          <div class="header">
            <h2>Latest</h2>
          </div>   
          <div class="row">
            <div class="column">
              <h3>First Blog</h3>
              <a href="sksksk.html">What is Theme?</a>
            </div>
            <div class="column">
              <h3>Second Blog</h3>
              <a href="sksksksk.html">Points of View</a>
            </div>
            <div class="column">
              <h3></h3>
            </div>
          </div>
        </div>
      </div> 
    </div>
    <div style="position: relative;">
    
    <div class="bgimg-1">
      <div class="caption">
        <span class="border">Arabian Nights</span>
      </div>
    </div>

    <footer style="color:#ddd;background-color:#232323;text-align:center;padding:50px 80px;text-align: center;">&#169; Copyright 2019 Magdoub & Pejic</footer>

Pastebin:

• Landing Page
• About Us
• Blog 1

Answer 1

you just add box-sizing: border-box; in .column

.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}

because you have 10px for each column. The column width is 33.33% + 10px + 10px so it make the margin was mess. The box-sizing: border-box include padding and border in the element's total width and height so the width will 33.33% both padding-left:10px and padding-right 10px.