I have two divs, one has the width of 20% and the other is 80%, they should fit in one line because they both make up 100% but they don't for some reason.
I made sure I added the box model fix, box-sizing I mean, but it still doesn't fit. I tried playing around with margins, borders, paddings, but no luck so far. I have no idea what the problem is. I measured the pixels they make up by seeing the percentages of each div, and for some reason they make up more than a 100%, but why? I set their width to 20% and 80%, why would they be more than their parent container's total width?
html {
box-sizing: border-box;
}
*,
*:after,
*:before {
box-sizing: border-box;
/* The Box Model Fix */
}
#main-container {
width: 100%;
margin: 0;
padding: 20px;
}
#title {
width: 100%;
height: 400px;
border-radius: 5px;
background-color: #193e7a;
overflow: hidden;
min-width: 900px;
}
#title h1 {
/* font-family: 'Indie Flower', cursive; */
font-family: 'Dancing Script', cursive;
margin: 180px 0 0 20%;
font-size: 100px;
display: inline-block;
}
#title h2 {
font-family: 'Indie Flower', cursive;
/* font-family: 'Dancing Script', cursive; */
margin: 0 0 0 20%;
font-size: 30px;
white-space: nowrap;
}
.col-small {
border-radius: 5px;
width: 20%;
height: 300px;
background-color: #a3b4d1;
border-top: 5px solid red;
overflow-y: hidden;
overflow-x: hidden;
min-width: 280px;
display: inline-block;
margin-top: 20px
}
.col-small p {
padding: 10px 15px 15px 15px;
margin: 0;
display: inline-block;
}
.col-wide {
border-radius: 5px;
width: 80%;
height: 300px;
background-color: #a3b4d1;
border-top: 5px solid green;
overflow: hidden;
min-width: 480px;
display: inline-block;
margin-top: 20px;
}<div id="main-container">
<header>
<div id="title">
<h1>Welcome!</h1>
<h2>Hello World!</h2>
</div>
</header>
<section>
<div class="col-small">
<img src="https://source.unsplash.com/random">
</div>
<div class="col-wide">
<img src="https://source.unsplash.com/random">
</div>
</section>
</div>