How would I center the phone image and the phone number on my web-page?

add the following css to the element:

width: 30%;
display: block;
margin: 0 auto;

Hi there!

Hmmm, as you can see, the phone number is wrapped in a <p> tag. You cannot see it, but actually it is already set to occupy the full width of the browser since <p> has a display: block property by default.

To center this on a page, I would suggest that you wrap the paragraph in a <div>. Then set a width value to the div and position that on the page. The div acts as a "wrapper" and will move the paragraph nested in it when it is moved/centered on the page. The code could look like this:

HTML:

<div class="wrapper">
   <p class="phone">Phone Number</p>
</div>

CSS:

.wrapper {
            width: 500px;
            margin: 0 auto;
        }

        .phone {
            text-align: center;
        }

        .phone::before {
            content: "\2706";
        }

I added a text-align property to the paragraph because it's just two words and that won't be enough to span the whole 500px width of the <div>. Hope this helps.