I am building a portfolio and for some reason cannot adjust the margins of my bio container. Adjusting the width won't work and if I try adjusting the left-right margin to 0vh, it just pushes my container to the left like this:
Here is my CSS (with left-right margins set at auto instead of 0vh) and HTML:
.wrapper {
background-color: rgb(232, 234, 246);
padding: 6vh 0vh 4vh;
}
.container {
margin: 4vh auto 4vh;
padding: 2vh 5vh 2vh;
border: 1px solid gray;
border-radius: 2rem;
} <div className='wrapper'>
<div className='container' id='about'>
<Image className='bio-pic' src={profile} alt='casey' />
<h2>About Me</h2>
<p>
I am a full-stack web developer, passionate about turning ideas into
reality. Experienced with front-end and back-end development, I enjoy
the logical puzzles that come with software engineering and take pride
in writting elegant, dry code. I am excited to apply the skills I've
built as a developer in a challenging environment where I can grow as
a professional and be a positive impact as a team member. <br />
<br></br> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
I'd like for the container to have a width of 80vh and be centered. Can any CSS wizards help me out?
