Dasmoto’s arts and Crafts review request

Hi all my name is Anthony! I just completed the Dasmoto’s Arts and Crafts project and would love a code review, particularly with my CSS styling on trying to center the h1 ontop of the banner img! Thank-you :smiley:
Below is my HTML

<!DOCTYPE html>

<html lang="en">


    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" href="app/styles.css">

    <title>Dasmoto Arts & Crafts</title>



    <!-- Banner -->

    <div class="banner">

    <h1>Dasmoto's Arts & Crafts</h1>

    <img src="app/images/pattern.webp" alt="Banner, tiled wall." class="pattern">


<!-- Section: Brushes -->


<h2 class="headerBrush">Brushes</h2>

<img src="app/images/hacksaw.webp" alt="Hacksaw Brushes">

<h3>Hacksaw Brushes</h3>

<p>Made of the highest quality oak, Hacksaw brushes are known for their weight and ability to hold paint in large amounts. Available in different sizes.<span class="price"> Starting at $3.00 / brush.</span></p>


<!-- Section: Frames -->


<h2 class="headerFrame">Frames</h2>

<img src="app/images/frames.webp" alt="Many different coloured picture frames.">

<h3>Art Frames (assorted)</h3>

<p>Assorted frames made of different material, including MDF, birchwood and PDE. Select frames can be sanded and painted according to your needs.<span class="price"> Starting at $2.00 / frame.</span></p>


<!-- Section: Paint -->


<h2 class="headerPaint">Paint</h2>

<img src="app/images/finnish.jpeg" alt="Opened tubes of paint">

<h3>Clean Finnish Paint</h3>

<p>Imported paint from Finland. Over 256 colors available in-store, varying in quantity (1 oz. to 8.oz). Clean Finnish paint microbinds to canvas, increasing the finish and longevity of any artwork.<span class="price"> Starting at $5.00 / tube.</span></p>




Below is my CSS styles.

body {

    font-family: Helvetica, Arial, sans-serif;


.pattern {

    width: 100%;

    height: 150px;

    object-fit: cover;

    position: relative;


h1 {

    font-size: 100px;

    font-weight: bold;

    color: khaki;

    width: 100%;

    text-align: center;

    position: absolute;

    z-index: 1;

    margin: 0 auto;


h2 {

    font-size: 32px;

    font-weight: bold;

    color: white;


.headerBrush {

    background-color: mediumspringgreen;


.headerFrame {

    background-color: lightcoral;


.headerPaint {

    background-color: skyblue;


.price {

    font-weight: bold;

    color: blue;