Center CSS grid content and create background image

I have been stuck on this for quite some time and I am new to css in general. My goal here to to make a 3 column layout where the first and last columns are empty, and they will serve as the margin (not sure if that is the correct word since I know there is a margin property) for the page. In the center column I am trying to put a flexbox for each row to center a title, quote, and slogan. Artist credits will be displayed in the bottom right of the middle column. However, I have noticed that the content is never centered on my monitor and I have not idea why. Additionally, I cannot seem to figure out how to make a background image span the whole container or center column. I was hoping the content (title, slogan, quote, artist credits) could be on top of the background image and that the background image could have a max width similar to the center column. Here is some code (I commented out the background image stuff for now to see spacing):

html

<section class="welcome">
<div class="welcome-container">
<div id="welcome-title">Some Title</div>
<div class="welcome-slogan">Slogan</div>
<div class="welcome-quote fst-italic">"A quote" -Person</div>
<div class="artist-credit">Image by <a href="https://google.com">Artist</a></div>
<!-- <div class="welcome-cover"><img src="/images/welcome_image_bw.png"/></div> -->
</div>
</section>

css

.welcome {
z-index: 2;
}
.welcome-container {
display: grid; // make the homepage container a css grid (exclude header/footer)
grid-template-columns: auto fit-content(1200px) auto; // 12 cols (max) and can style as desired
grid-template-rows: 400px, auto, 100px, 100px; // title, slogan, quote, creds
justify-content: center; // content is left to right
z-index: 1;
// background: 
//     url("https://www.rd.com/wp-content/uploads/2020/04/GettyImages-694542042-e1586274805503.jpg") green
//     scroll // fixed to keep img despite scroll
//     no-repeat;
// background-size: 20% auto;
}
#welcome-title {
grid-column: 2 / span 1; 
display: flex;
justify-content: center;
font-size: 60px;
font-family: 'Roboto Mono';
font-weight: 400;
color: var(--color-dark);
}
.welcome-slogan {
grid-column: 2 / span 1; 
display: flex;
justify-content: center;
font-size: 28px;
font-family: 'Roboto Mono';
font-weight: 300;
color: var(--color-med);
}
.welcome-quote {
grid-column: 2 / span 1;
display: flex;
justify-content: center;
font-size: 18px;
font-family: 'Roboto Mono';
font-weight: 300;
color: var(--color-dark);
}
.welcome-cover {
grid-column: 1 / -1;
position: relative;
width: 100%; // make sure doesnt exceed page horizontally
height: 100%;
object-fit: cover;
z-index: 0; // image in background
background-color: var(--color-dark); // in case img doesnt load
}

Here are some screenshots to show how the page is not aligned:

To summarize, I am trying to accomplish the following:

1. How to center the center column of the grid? How can I set the max width of this center column (I tried fit-content()). Why are there extra grid cells appearing in the inspect element panel?
2. How to set a background image inside of welcome-container? I tried in both css and html and I ideally want it to be responsive. I was thinking of later making a media query to stop the image from stretching if the container becomes wider than the image. Is this a good approach? Or should I instead make the image fill the center column and it can be limited by the max width there?

It's not the best idea to set up columns just to leave them empty. You can set margins/padding as part of the grid.

As you asked for a 3 column grid, you may check the code snippet I've attached. For future reference, "text-align: center;" does the trick. When it comes to grids, I advise you to check the justify-self and align-self properties (mdn docs).

I added some padding and borders to make it easier for you to see how everything is structured. You can get rid of that.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.container {
display: grid;
padding: 10px;
grid-template-columns: repeat(3, 1fr);
border: 1px solid red;
column-gap: 20px;
}
.column {
border: 1px solid blue;
text-align: center;
}
.center-column {
background-color: yellow;
}

<!-- language: lang-html -->

<div class="container">
<div class="column left-column"></div>
<div class="column center-column">
<h1 class="title">Some title</h1>
<div class="slogan">Slogan</div>
<div class="quote">Some quote</div>
<div class="artist">Image by <a href="#">Artist</a></div>
</div>
<div class="column right-column"></div>
</div>

<!-- end snippet -->

I found the answer to 1. I ended up changing to a 5 column layout and then centering the content there with justify-content and text-align. However, setting a background image across an area of the grid is still a challenge.

edit: I found an answer to 2, although not elegant. In the html I had to put an image tag not inside of a div and then follow how to make content overlap in a grid from here:
https://stackoverflow.com/questions/2941189/how-to-overlay-one-div-over-another-div
and here: https://www.youtube.com/watch?v=-qOe8lBAChE&amp;ab_channel=TraversyMedia