Challenge Project: Build a Website Design System - Size and Alignment

Challenge Project: Build a Website Design System

Hello! So the madderhatter has run into an issue. I might need a tissue. Anyways,…

I’m working on this project and mostly I’ve tried to copy the example site provided for this project. The issue is this:

I added the different google fonts successfully. However, the default rendering of the added google fonts puts the text content at different sizes. I’ve wrapped the text in a nice tag and my section holds information about the borader and margin. So I’ve essentially drawn a nice box around the text. The problem comes when my “box” is rendered its height is determined by the text inside of it. So I have 3 nice boxes that are aligned evenly left right width and bottom but the top is not even due to varying heights, the problem introduced by the variable in font size.

I’ll provide my code here momentarily but what I would like to accomplish is to have my “boxes” identical in size and for the text content inside of them to align the

element on the same horizontal line. How do I go about getting this nice clean alignment??

<!Doctype html>
<html>

<head>
	<title>Madd Style Guide</title>
	<link rel="stylesheet" type="text/css" href="./resources/index.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=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap"
		rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap"
		rel="stylesheet">
	<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
		rel="stylesheet">
</head>

<body>
	<header>
		<h1 class="sitetitle">MadderHatter Website Style Guide</h1>
	</header>
	<main>
		<article class="colorsection">
			<h2>Colors</h2>
			<section class="coolblue">
				<p>Cool Blue</p>
				<p>2d5dcc</p>
			</section>
			<section class="pink">
				<p>Pink</p>
				<p>d957d9</p>
			</section>
			<section class="mintgreen">
				<p>Mint Green</p>
				<p>4fe0b0</p>
			</section>
		</article>
		<article class="fontsection">
			<h2>Fonts</h2>
			<section class="fontscontainer">
				<h3 class="scp">Source Code Pro</h3>
				<p class="scp">The quick brown fox jumps over the lazy dog.</p>
				<p class="scp">The quick brown fox jumps over the lazy dog.</p>
				<p class="scp">The quick brown fox jumps over the lazy dog.</p>
			</section>
			<section class="fontscontainer">
				<h3 class="nsans">Nunito Sans</h3>
				<p class="nsans">The quick brown fox jumps over the lazy dog.</p>
				<p class="nsans">The quick brown fox jumps over the lazy dog.</p>
				<p class="nsans">The quick brown fox jumps over the lazy dog.</p>
			</section>
			<section class="fontscontainer">
				<h3 class="pop">Poppins</h3>
				<p class="pop">The quick brown fox jumps over the lazy dog.</p>
				<p class="pop">The quick brown fox jumps over the lazy dog.</p>
				<p class="pop">The quick brown fox jumps over the lazy dog.</p>
			</section>
		</article>
		<article class="textsection">
			<h2>Text Style</h2>
			<section class="list">
				<h1 class="texth1">H1 Heading</h1>
				<ul>
					<li>Font-Weight: 700 &lpar;bold&rpar;</li>
					<li>Font-Size: 26px</li>
					<li>Font-Family: Source Code Pro</li>
				</ul>
				<h2 class="h2sub">H2 Heading</h2>
				<ul>
					<li>Font-Weight: 500</li>
					<li>Font-Size: 18px</li>
					<li>Font-Family: Nunito Sans</li>
				</ul>
				<p class="textp">P&colon; paragraph</p>
				<ul>
					<li>Font-Weight: 400 &lpar;regular&rpar; &lpar;bold&rpar;</li>
					<li>Font-Size: 14px</li>
					<li>Font-Family: Poppins</li>
				</ul>
			</section>
		</article>
	</main>
</body>

</html>

h2 {
margin-left: 15px;
}

h3 {
text-align: center;
}

.sitetitle {
display: inline-block;
text-align: center;
margin-left: 37%;
}

.colorsection {
border: 1px solid green;
margin: 10px auto;
}

.colorsection p {
font-weight: 700;
font-size: 22px;
}

.colorcontainer {
border: 1px solid purple;
display: inline-block;
width: 32%;
margin-bottom: 23px;
margin-left: 15px;
}

.coolblue {
border: 1px solid purple;
display: inline-block;
width: 32%;
margin-bottom: 23px;
margin-left: 15px;
background-color: #2d5dcc;
}

.pink {
border: 1px solid purple;
display: inline-block;
width: 32%;
margin-bottom: 23px;
margin-left: 15px;
background-color: #d957d9;
}

.mintgreen {
border: 1px solid purple;
display: inline-block;
width: 32%;
margin-bottom: 23px;
margin-left: 15px;
background-color: #4fe0b0;
}

p {
text-align: center;
}

.fontsection {
border: 1px solid blue;
}

.fontscontainer {
display: inline-block;
border: 1px solid red;
width: 32%;
margin-bottom: 23px;
margin-left: 15px;
}

.textsection {
border: 1px solid blue;
margin: 10px 0;
}

.scp {
font-family: “Source Code Pro”, monospace;
}

.nsans {
font-family: “Nunito Sans”, sans-serif;
}

.pop {
font-family: “Poppins”, sans-serif;
font-weight: 400;
font-style: normal;
}

.list {
margin-left: 16px;
}

.texth1 {
font-size: 2em;
font-weight: bold;
}

.textp {
text-align: left;
}

Hi there!

As I understand, you are talking about this rendering of your containers:

Image

This behaviour is determined by using percents here:

Easiest way to fix it is to use constant units (pixels), for example, width: 250px:

Image

Also flexboxes can give you a wide range of options to render your content on the page: