I am creating a CSS style chart project and i created a container div with 3 smaller divs inside. The container has the title "___ styles" then the 3 divs have the styles ex. fonts, colors. The first container div holds 3 colored boxes of equal height and width. I coped that exact code to create boxes of fonts.
Now I have 3 font box divs with about the same amount of content. The first div is higher than the others and im not sure why. The "Alkatra" font box is higher.
h1{
font-family:'Roboto', serif;
font-weight:bold;
}
.color-container, .font-container{
border: 2px solid black;
width:100%;
}
h2{
margin:5px;
font-family: "Roboto Mono", serif;
}
.color-panel{
width:30%;
margin:5px;
color:white;
text-align:center;
display:inline-block;
font-family: "Roboto Mono", serif;
border-radius: 10px;
border: 3px black dotted;
}
.font-panel{
width:30%;
margin:5px;
color:white;
text-align:center;
display:inline-block;
font-family: "Roboto Mono", serif;
border-radius: 10px;
border: 3px black dotted;
background-color: beige;
}
.coolblue{
background-color: #005073;
}
.pink{
background-color: #FFC0CB;
}
.orange{
background-color: #FFA500;
}
#roboto{
font-family:"Roboto", serif;
}
#alkatra{
font-family: "Alkatra", serif;
}
#opensans{
font-family: "Open Sans", serif;
}<html>
<head>
<link rel="stylesheet" href="./styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Alkatra&display=swap" rel="stylesheet">
</head>
<body>
<h1>My CSS style guide</h1>
<div class="container">
<div class="color-container">
<h2>Color styles:</h2>
<hr>
<div class="color-panel coolblue">
<h2>Cool blue</h2>
<p>Hex: #005073</p>
</div>
<div class="color-panel pink">
<h2>Pink</h2>
<p>Hex: #FFC0CB</p>
</div>
<div class="color-panel orange">
<h2>Orange</h2>
<p>Hex: #FFA500</p>
</div>
</div>
</div>
<div class="container">
<div class="font-container">
<h2>Font styles:</h2>
<hr>
<div class="font-panel alkatra">
<h2 id="alkatra">Alkatra</h2>
<p>Hex: #005073</p>
</div>
<div class="font-panel opensans">
<h2 id="opensans">Open Sans</h2>
<p>Hex: #FFC0CB</p>
</div>
<div class="font-panel roboto">
<h2 id="roboto">Roboto</h2>
<p>Hex: #FFA500</p>
</div>
</div>
</div>
</body>
</html>Any ideas how to fix this? Im new to web design and not too good at CSS. All simple CSS solutions are extremely helpful!
