Hello everyone,
I’m currently resolving the Challenge Project: Build a Website Design System.
here’s my HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Website Guideline</title>
<link rel="stylesheet" href="resources/css/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=Calistoga&family=Carter+One&family=Shrikhand&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Prompt:[email protected];400;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="Header">
<h1>Website Guidelines</h1>
</div>
<div class="Colours">
<h2>Colours</h2>
<p id="dark-green">Colour Name: Dark Green<br>Hex Code: #002927</p>
<p id="reseda-green">Colour Name: Reseda Green<br>Hex Code: #7F7F62</p>
<p id="dun">Colour Name: Dun<br>Hex Code: #DBCBA9</p>
<p id="beaver">Colour Name: Beaver<br>Hex Code: #8D7968</p>
<p id="licorice">Colour Name: Licorice<br>Hex Code: #1A090D</p>
</div>
</body>
</html>
And here’s my CSS
* {
background-color: #dbcba9;
}
h1 {
font-family: 'Shrikhand', cursive;
color: #002927;
letter-spacing: 3px;
font-size: 45px;
text-align: center;
}
h2 {
font-family: 'Calistoga';
color: #002927;
}
.Colours {
width: 75%;
margin: auto;
text-align: center;
border: 2px solid #002927;
border-radius: 7px;
}
p {
display: inline-block;
padding: 15px;
width: 250px;
height: 100px;
font-family: Prompt;
font-weight: 200;
}
#dark-green {
background-color: #002927;
color: white
}
in this part:
How do I center the texting the center of the rectangle? Do I need to make it an image?
Thank you in advance 
Mafalda