I have been attempting to vertically center the column within a container, but it keeps aligning to the left. Despite trying numerous CSS properties, I can't seem to get it right. Shrinking the width of the paragraph container to 650px or 70% doesn't work as expected, as it still shifts leftward. Any suggestions on what I might be doing incorrectly?
<letstalk>
<div className="container">
<div className="row">
<h1>Escape is not his plan.
I must face him, alone.</h1>
<div className="col">
<p className="textcontent"> As you wish. I can't get involved! I've got work to do!
It's not that I like the Empire, I hate it, but there's nothing
I can do about it right now. It's such a long way from here. Alderaan?
I'm not going to Alderaan.
I've got to go home. It's late, I'm in for it as it is.</p>
</div>
<button type="button" class="btn btn-primary">Let's Talk</button>
</div>
</div>
//css
letstalk {
height: auto;
background: #2D2828;
display: flex;
justify-content: center;
color: white;
padding: 50px;
.container{
justify-content: center;
text-align: center;
}
.textcontent {
max-width: 650px;
}
}
I am struggling to center the paragraph instead of having it aligned to the left side. Even setting the width to 60% or 650px does not seem to work, particularly for that paragraph. Would appreciate any help in figuring out where I went wrong.