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

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">
Home
About Us
<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>
What is Theme?
</div>
<div class="column">
<h3>Second Blog</h3>
Points of View
</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;">© 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.