I am trying to have the text in my project fit and justify accordingly when the dimensions of the screen smaller. So the text does not wrap for some reason even if I have it in the code.
I tried to input all the html classes I need to have the changes applied to in teh media query and have it be applied when the width of the screen goes lower but it does not work
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="preconnect" href="https://fonts.googleapis.com" /><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /><link href="https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap" rel="stylesheet" /><link rel="stylesheet" href="index.css" /><link rel="stylesheet" href="globals.css" /></head><body><div class="banner"><div class="text"><img class="vector" id="vctr" src="Imagery/vector--2nd.png" /><div class="frame"><div class="title-with-icon"><img id="img--green--thunder" class="bolt-lightning" src="Imagery/green--thunder.png" style="width: 21px; height: 28px; margin-left: 16.5px" /><p class="text-wrapper">10% Отстъпказапърватавипоръчка</p></div><p class="div"> Get a complimentary 10% discount on your car insurance. Become a Trusti member and take advantage of this temporary offer!</p></div><div class="text-button"><button class="CTA">Научиповече</button><div class="icon" style="bottom: 24px"><img src="Imagery/Icon.png" /></div></div></div><div class="mediaElements"><img class="star" src="Imagery/entire--star.png" /><img class="image" src="Imagery/group--component.png" /></div></div></body></html>.banner { display: flex; align-items: center; gap: var(--tokens-spacing-horizontal-horizontal-space-lg); background-color: var(--neutralshade-400-white); overflow: hidden; border: 1px solid; border-color: #009147; width: 100%; min-height: 162px; max-width: 1204px; border-radius: 16px; justify-content: space-between; /*bzh addition*/ flex-wrap: wrap; /*bzh addition*/}.banner .mediaElements { position: relative; min-width: 452px; height: 162px;}#img--green--thunder { margin-left: 16.5px; margin-top: 24px;}#vctr { position: absolute; overflow: hidden; width: 636px; height: 162px; left: 99.5px; top: 0; left: 0;}.banner .star { position: absolute; width: 383px; height: 383px; top: -90px; left: 38px;}.banner .title-with-icon { display: flex;}.banner .text { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 16px; position: relative; flex: 0 0 auto;}.banner .frame { display: flex; flex-direction: column; align-items: flex-start; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto;}.banner .text-wrapper { position: relative; align-self: stretch; margin-top: -1px; font-family: "Nunito Sans"; font-weight: var(--desktop-h4-bold-font-weight); color: var(--neutralshade-900-text); letter-spacing: var(--desktop-h4-bold-letter-spacing); line-height: var(--desktop-h4-bold-line-height); left: 10.5px; top: 24px; font-size: 24px; font-style: normal; font-weight: 700; line-height: 32px;}.banner .div { position: relative; justify-content: space-between; display: flex; flex-direction: wrap; width: 513px; font-family: "Open Sans"; font-weight: var(--global-body-small-font-weight); color: var(--neutralshade-900-text); font-size: var(--global-body-small-font-size); letter-spacing: var(--global-body-small-letter-spacing); line-height: var(--global-body-small-line-height); font-style: var(--global-body-small-font-style); left: 48px; font-size: 14px; font-style: normal; font-weight: 400; line-height: 21px; bottom: 16px;}.banner .text-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--collection-1-0-5-rem-duplicate); position: relative; flex: 0 0 auto;}.banner .CTA { all: unset; box-sizing: border-box; position: relative; width: fit-content; margin-top: -1px; font-family: var(--global-label-font-family); font-weight: var(--global-label-font-weight); color: var(--shadesshade-900-black); font-size: var(--global-label-font-size); text-align: center; letter-spacing: var(--global-label-letter-spacing); line-height: var(--global-label-line-height); white-space: nowrap; font-style: var(--global-label-font-style); left: 48px; bottom: 24px;}.banner .icon { position: relative; width: fit-content; font-weight: 400; color: var(--orangeorange-800-primary); font-size: 16px; letter-spacing: 0; line-height: normal; white-space: nowrap; left: 54px;}.banner .image { position: absolute; width: 362px; height: 162px; top: 0; left: 90px; object-fit: cover;}@media screen and (max-width: 900px) and (min-width: 327px) { .banner { min-width: auto; justify-content: center; } .banner.text { justify-content: justify; text-align: left; flex-wrap: wrap; overflow-wrap: break-word; } #vctr { display: none; overflow: hidden; }}