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.
-css-
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;
}
p{
font-size: 1.2rem;
width: 45.5rem;
margin: 2rem 3.7rem 2rem 4.5rem;
}
}
-HTML-
body>
section class=“container”>
h1 class=“retro”>Welcome To The Multiverse
p class=“grade”>Where your wildest dreams come true
/section>
/body>
/html>