Trouble with styling

Im having trouble adjusting the background color width in the second line. i want it to come closer to the letters so it isnt using all that space before the first letter and the space after the last. Can someone help me out with how to fix that? thank you. my code is below.

html {
font-size: 62.5%;

@font-face {

font-family: "future";
src: url("/Fonts/Future\ Light.ttf") format("truetype");

font-weight: normal;
font-style: normal;

body {

height: 100vh;
background: url(/Images/—Pngtree—retro\ cyberpunk\ style\ 80s\ sci-fi_1177659.png) no-repeat;
background-size: 100vw 100vh;
display: flex;
background-size: 100% 100%;

align-items: center;
justify-content: center;
font-family: "future";
letter-spacing: 6px;
text-align: center;


h1 {
font-size: 6rem ;
margin: 3rem 0;

color: white;


p {

color: white;
font-size: 3rem;
background-color: rgba(98, 13, 115, 0.3) ;
padding: 1rem;
width: 72rem;
margin: 4rem 7.5rem 4rem 9rem;


@media screen and (max-width: 501px ) {

h1 {

font-size: 2.7rem;



    font-size: 1.2rem;
    width: 45.5rem;
    margin: 2rem 3.7rem 2rem 4.5rem;


section class=“container”>
h1 class=“retro”>Welcome To The Multiverse
p class=“grade”>Where your wildest dreams come true


I would wrap the paragraph in a div with a class of hero then define the width of the box in css. You could make the width: fit content then adjust the sides with padding. The next problem is if it will be responsive, i think that will be okay cause wrap should be enabled on default.

1 Like