I'm currently working on recreating a snack bar box using CSS to practice the concepts I've learned in a tutorial. Within another div element, I have two child divs ("10" and "bars") that I want to stack on top of each other. However, they are appearing next to each other instead.
Below is the code snippet I am using:
/*Color Palette
lara green: 769A30;
Lara red: E63A3E;
Lara tan: F0CD92;
Lara brown: 612D22;
*/
/*GLOBAL STYLE
------------------------------*/
body {
background: #769A30;
}
@font-face {
font-family: 'Akzidenz';
src: url('Akzidenz Grotesk Black.ttf') format('truetype');
}
h1, h2 {
color: #F0CD92;
font-family: 'Akzidenz';
}
/*HEADER
------------------------------*/
.headerSection {
text-align: center;
background: #612D22;
margin: 0px;
padding: 0px;
height: 100px;
}
.headerDiv {
display: inline-block;
text-align: center;
background: red;
height: 100px;
width: 100px;
line-height: 100px;
}
#middleDiv {
display: inline-block;
}
.middleSubDiv {
text-align: center;
display: inline-block;
background: #E63A3E;
height: 50px;
width: 100px;
line-height: 50px;
}
.topH1 {
margin: 0px;
padding: 0px;
}
.topH2 {
margin: 0px;
padding: 0px;
}<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Larabar | Apple Pie</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="headerSection"><!--
--><div class="headerDiv"><!--
---><h1 class="topH1">value<h1><!--
--></div><!--
--><div id="middleDiv"><!--
---><div class ="middleSubDiv"><!--
----><h2 class="topH2">10<h2><!--
---></div><!--
---><div class ="middleSubDiv"><!--
----><h2 class="topH2">bars<h2><!--
---></div><!--
--></div><!--
--><div class="headerDiv"><!--
--><h1 class="topH1">pack<h1><!--
--></div><!--
--></div>
<footer>
</footer>
</body>
</html>Removing "display: inline-block;" from the middleSubDiv class allows the two divs to stack correctly, but it affects the alignment of the neighboring divs. Can someone shed some light on why this happens? View image reference
Any assistance in understanding this issue would be greatly appreciated!