Header Alignment

Site URL: https://plaza-square.squarespace.com/

Hi there,

I'm trying to center align this markdown box that I have in the header of my pages. I added this code to CSS for the box around the words:

.boxBorder {
     border: 2px solid #deebf7;
     padding: 10px;
     outline: #deebf7 solid 2px;
     outline-offset: 5px;
   }

And this code in the markdown box:

<h1>
<div class="boxBorder">
<div style="text-align:center"
>
FULL-SERVICE LAUNDRY
</div> 

but I the box and words inside are not centered in this header image and I'm not sure why. It's slightly lower. I am also trying to get the box to be closer to the words on the left and right, rather than take up that whole empty space. Thanks for anyones help!

Also, the password to get into the site is "Peanuts" without the quotation marks. I also attached a picture if you for some reason can't get into the site.

I figured out how to get the markdown centered. I just put this:

<center> <all other styling>
  
</all other styling> </center>

before and after the rest. but I still need help with the other question.

On 8/6/2021 at 1:27 AM, Auzday said:

I figured out how to get the markdown centered. I just put this:

<center> <all other styling>
  
</all other styling> </center>

before and after the rest. but I still need help with the other question.

Hi. What is access password?

Peanuts

I just need to figure out how to make the width of the box closer to the words. And make the mobile width smaller too

On 8/9/2021 at 12:32 AM, Auzday said:

I just need to figure out how to make the width of the box closer to the words. And make the mobile width smaller too

Try this CSS

.boxBorder {
    padding: 5px !important;
}
@media screen and (max-width:767px) {
.boxBorder div {
    font-size: 1.5rem;
}
}

Thanks! That helps with mobile. But the width is still much wider than the words on each end. For desktop and mobile