Hey guys! Sorry if this post is not within posting guideline context, I’m just literally wrecking my brain trying to figure this out.

I’m trying to center a div with text within a div that has a background. I. don’t. get. what. I’m. doing. wrong.

Literally, I’ve tried EVERYTHING I could find online, and my no matter what I do, my text div is just stuck to the left of the screen.

The green box is the one I want center in the background of the image.

For reference, this is my CSS that I have associated to my HTML.

.main{
	background-image:url('images/backgrounddiamonds.jpg');
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
    overflow-x: hidden;
    max-width: 100%;
    position: relative;
}

.maintext{
	font-size:350%;
	text-align: center;
	font-family: BaskervilleOldFace;
	background-color:green;
	max-width: 60%;
	margin: 0 auto;
	padding: 3px;
	display: inline-block;
	vertical-align: middle;
}

And here is my HTML.

    <div class="main">
      <div class="maintext">
        Shop and compare over 8+ brands and 30+ cuts!
      </div>
    </div>

Help ya girl out 😅