Пробел справа на странице ⇐ CSS

[Гость]

У меня проблема: в правой части экрана есть пробел, я могу прокручивать вправо, что не должно быть возможно, и небольшой пробел, который я могу прокручивать вверх и вниз,

Вверху был гораздо больший пробел, но я исправил его, присвоив ему position: Absolute, теперь в правой части страницы есть небольшой пробел, я хочу, чтобы изображения поместились 100vh и 100vw, чтобы не иметь возможности прокручивать где угодно, также происходит необычная вещь, когда я не могу центрировать item1.name и >item2.name, попробовал justify-contet: space-between и space-around, похоже, ничего не работает, попробовал добавить space в элементы, которые тоже не сработали, я застрял здесь на какое-то время, и мне бы очень пригодился хороший ответ и то, как вы это сделали, спасибо!

Также кто-нибудь может сделать фрагмент, у меня нет кнопки.

ВОТ КОД:

const items = [ { name: "Ferrari Portofino 2021", значение: 250000, imageSrc: "https://cdn.vox-cdn.com/thumbor/K0DGSuo ... ters:focal(2693x1515:2694x 1516)/кдн. vox-cdn.com/uploads/chorus_asset/file/22780648/COUNTACH_LPI800_4__2_.jpg" }, { name: "Lamborghini Gallardo", значение: 126000, imageSrc: "https://di-uploads-pod30.dealerinspire. ... ct2021.png" } , // Добавляем сюда больше элементов и их значений ]; пусть currentScore = 0; пусть элемент1, элемент2, правильныйиндекс; const item1Element = document.getElementById("item1"); const item2Element = document.getElementById("item2"); const ScoreTextElement = document.getElementById("score-text"); const вопросTextElement = document.getElementById("текст-вопроса"); const moreButton = document.getElementById("больше"); const lessButton = document.getElementById("меньше"); const valueIndex = document.getElementById("valueIndex"); const navPlay = document.getElementById("playy") const playNav = document.getElementById("playnav") функция startNewRound() { const index1 = Math.floor(Math.random() * items.length); пусть index2; делать { index2 = Math.floor(Math.random() * items.length); } Пока (индекс2 === индекс1); элемент1 = элементы[индекс1]; элемент2 = элементы[индекс2]; item1Element.src = item1.imageSrc; item2Element.src = item2.imageSrc; setTimeout(функция () { item1Element.style.opacity = 1; item2Element.style.opacity = 1; }, 100); вопросTextElement.innerHTML = `${item2.name}                    &nbsp ;                         &nbsp ;      ${item1.name}`; document.getElementById("item1").textContent = item1.name + " " + formatCurrency(item1.value); document.getElementById("item2").textContent = item2.name + " " + formatCurrency(item2.value); правильныйИндекс = элемент1.значение > элемент2.значение? 0:1; moreButton.addEventListener("click", handleMoreClick); lessButton.addEventListener("клик", handleLessClick); } // ПРИ НАЖИМЕ #playy ОТКРЫТЬ ВСПЛАННОЕ ОКНО КАТЕГОРИЙ navPlay.addEventListener("клик", функция() { popup.style.display = "блокировать" }); //````````````````````````````````````````````` функция handleMoreClick() { handleItemClick (0, правильныйИндекс); showValue(0, правильныйИндекс, элемент1, элемент2); удалитьClickListeners(); } функция handleLessClick() { handleItemClick (1, правильныйИндекс); showValue(1, правильныйИндекс, элемент1, элемент2); удалитьClickListeners(); } функция удаленияClickListeners() { moreButton.removeEventListener("клик", handleMoreClick); lessButton.removeEventListener("клик", handleLessClick); } функция startNewGame() { текущий балл = 0; ScoreTextElement.textContent = `Оценка: ${currentScore}`; начатьНовыйРаунд(); } функция endGame() { moreButton.disabled = правда; lessButton.disabled = правда; const playAgainButton = document.createElement("кнопка"); playAgainButton.textContent = "Играть еще раз"; playAgainButton.addEventListener("click", function () { moreButton.disabled = ложь; lessButton.disabled = ложь; valueIndex.style.display = «нет»; playAgainButton.remove(); начатьНовуюИгру(); }); вопросTextElement.textContent = "Игра окончена!"; вопросTextElement.appendChild(playAgainButton); } функция handleItemClick(clickedIndex, CorrectIndex) { if (clickedIndex === CorrectIndex) { текущийScore++; ScoreTextElement.textContent = `Оценка: ${currentScore}`; alert("Вы угадали правильно"); } еще { конец игры(); возвращаться; } setTimeout (startNewRound, 1000); } функция showValue(clickedIndex, CorrectIndex, item1, item2) { if (clickedIndex === CorrectIndex) { valueIndex.innerHTML = `${formatCurrency(item1.value)}                              ${formatCurrency(item2.value)}`; valueIndex.style.display = "блок"; } еще { valueIndex.style.display = «нет»; } } функция formatCurrency (значение) { return `$${value.toLocaleString()}`; } document.addEventListener("DOMContentLoaded", function () { const playButton = document.querySelector(".play"); const popup = document.getElementById("всплывающее окно"); const closePopupButton = document.getElementById("закрыть всплывающее окно"); const CategoryButtons = document.querySelectorAll(".category"); const gameStarted = document.querySelector(".gameStarted"); const mainPage = document.getElementById("главная страница"); const main = document.querySelector("main"); const body = document.querySelector("body"); playButton.addEventListener("click", function() { popup.style.display = "блокировать"; }); closePopupButton.addEventListener("click", function() { popup.style.display = "нет"; }); playNav.addEventListener("клик", функция() { popup.style.display = "нет"; mainPage.style.display = «нет»; gameStarted.style.display = "блокировать"; main.style.display = "нет"; gameStarted.classList.add('активный'); body.classList.add('активный'); начатьНовыйРаунд(); }); CategoryButtons.forEach(функция(кнопка) { button.addEventListener("click", function() { popup.style.display = "нет"; mainPage.style.display = «нет»; gameStarted.style.display = "блокировать"; main.style.display = "нет"; gameStarted.classList.add('активный'); body.classList.add('активный'); начатьНовыйРаунд(); }); }); }); * { маржа: 0; заполнение: 0; поведение прокрутки: плавное; размер коробки: граница-коробка; семейство шрифтов: Ink Free; } /*УСТАНОВИТЬ ПАНЕЛЬ НАВИГАЦИИ В ВЕРХНЕЙ ЧАСТИ ЭКРАНА, УДАЛИТЬ ЦВЕТ ФОНА И ТЕНЬ ПОЗЖЕ*/ .navbar{ ширина: 100%; положение: фиксированное; верх: 0; слева: 0; дисплей: гибкий; оправдание-содержание: пространство между; отступ: 1рем; выровнять-элементы: по центру; } /*НАСТРОЙКА ЦВЕТА И АНИМАЦИИ ЛОГОТИПА*/ h1{ белый цвет; размер шрифта: 2rem; поле слева: 2rem; } h1>a:hover{ поле слева: 2rem; переход: замедление 0,5 с; } /*НАСТРОЙКА НАВБАР*/ ли>а{ текстовое оформление: нет; белый цвет; размер шрифта: 1.4rem; поле слева: 0,6рем; поле справа: 3rem; } ли>а:hover{ цвет:бисквитный; непрозрачность: 0,8; переход: замедление 0,25 с; } h1>а{ текстовое оформление: нет; белый цвет; } ул { тип стиля списка: нет; } /*ФОНОВОЕ ИЗОБРАЖЕНИЕ УСТАНОВЛЕНО ПО ПОДГОТОВКЕ, ИЗМЕНИТЕ ШИРИНУ И ВЫСОТУ VH, ЕСЛИ НЕОБХОДИМО, УСТАНОВИТЕ ПРОЗРАЧНОСТЬ ДО 1 ИЛИ УДАЛИТЬ*/ тело{ фон: линейный градиент (слева внизу, #240303 10%, #aa5625 ); размер фона: обложка; ширина: 100вх; высота: 100вх; непрозрачность: 0,96; } /*ОСНОВНОЙ ТЕКСТ В СЕРЕДИНЕ ЭКРАНА*/ .wwm{ позиция: абсолютная; верх: 50%; осталось: 50%; трансформировать: транслировать(-50%, -50%); выравнивание текста: по центру; белый цвет; } .заголовок{ размер шрифта: 5rem; } /*КНОПКЕ «ВОСПРОИЗВЕДЕНИЕ» ТРЕБУЕТСЯ ЯВАСКРИПТ*/ .играть{ маржа-верх: 1рем; размер шрифта: 3rem; заполнение: 0рем 3рем; цвет фона: rgba(122, 64, 72, 0); белый цвет; граница-радиус: 2rem; граница: 0,125rem сплошной #fff; } .play:наведите{ цвет фона: RGB(255, 252, 252); переход: легкость входа и выхода 0,50 с; черный цвет; } /*чатгпт*/ .неожиданно возникнуть { дисплей: нет; положение: фиксированное; ширина: 100%; высота: 100%; фон: rgba(0, 0, 0, 0,7); z-индекс: 1000; отступ-верх: 350 пикселей; } .popup-content { фон: белый; ширина: 60%; максимальная ширина: 400 пикселей; поле: 20 пикселей авто; отступ: 20 пикселей; радиус границы: 5 пикселей; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); выравнивание текста: по центру; } .категории { дисплей: гибкий; flex-wrap: обертка; оправдание-содержание: центр; поле сверху: 20 пикселей; } .категория { поле: 5 пикселей; отступ: 10 пикселей 20 пикселей; граница: нет; граница-радиус: 2rem; курсор: указатель; размер шрифта: 2rem; цвет фона: черный; белый цвет; } .category:hover{ цвет фона: пшеница; черный цвет; переход: легкость 0,50 с; } .close-popup { поле сверху: 20 пикселей; цвет фона: #DC3545; размер шрифта: 1.8rem; заполнение: 0рем 1рем; цвет фона: rgba(0, 0, 0, 0); граница-радиус: 2rem; } .close-popup:hover{ цвет фона: красный; переход: легкость 0,50 с; } .gameStarted { дисплей: нет; положение: относительное; /* Изменяем позицию на относительную */ маржа-верх: 0; /* Удаляем верхнее поле */ } .gameStarted.active{ дисплей: нет; положение: относительное; /* Изменяем позицию на относительную */ маржа-верх: 0; /* Удаляем верхнее поле */ } .divv{ гибкое направление: строка; граница: 2 пикселя, сплошная красная; } .body.active{ --tw-bg-opacity: 1; цвет фона: rgb(30 41 59/var(--tw-bg-opacity)); переход: 1с легкость; } /* Оформление игрового контейнера */ .линия{ позиция: абсолютная; дисплей: гибкий; верх: 50%; осталось: 98%; трансформировать: транслировать(-50%, -50%); высота: 50вх; выровнять-элементы: по центру; непрозрачность: 0,9; z-индекс: 104; } .против { дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; ширина: 100 пикселей; высота: 100 пикселей; радиус границы: 50%; цвет фона: белый; черный цвет; размер шрифта: 44 пикселей; /* Отрегулируйте размер шрифта по мере необходимости */ начертание шрифта: жирный; /* При желании сделайте текст жирным */ z-индекс: 104; положение: относительное; } :корень{ --белый цвет; --размер шрифта: 3rem; } .собака { цвет фона: var(--color); /* Используйте переменную --main-color */ белый цвет; отступ: 10 пикселей 20 пикселей; } @import url('https://fonts.cdnfonts.com/css/rooneysans'); .вопрос-текст { белый цвет; положение: относительное; z-индекс: 1000; выравнивание текста: по центру; верх: 50%; осталось: 50%; трансформировать: транслировать(-25%, 500%); ширина: 98vw; семейство шрифтов: «RooneySans», без засечек; размер шрифта: 3rem; } /* Добавьте этот CSS в существующий файл Styles.css */ #item1{ ширина: 50vw; высота: 100vh; маржа: 0; заполнение: 0; минимальная высота: 850 пикселей; минимальная ширина: 950 пикселей; } #item2{ ширина: 50vw; высота: 100vh; маржа: 0; заполнение: 0; минимальная высота: 850 пикселей; минимальная ширина: 950 пикселей; } .изображения { дисплей: гибкий; позиция: абсолютная; z-индекс: 10; верх: 0; правильно: 0; внизу: 0; слева: 0; } .the-images img { объектное соответствие: обложка; высота: 100%; ширина: 100%; } #более менее{ дисплей: гибкий; размер шрифта: 2rem; заполнение: 0,8рем 5,5рем; цвет: #fff989; радиус границы: 2,5 рем; граница: 0,125rem сплошной #fff; поле-дно: 1рем; цвет фона: rgba(255,255,255,0); } #more:hover, #less:hover{ цвет фона: rgba(255,255,255,1); черный цвет; переход: легкость 0,50 с; } #меньше{ размер шрифта: 2rem; заполнение: 0,8рем 5,7рем; } .кнопки{ положение: относительное; отображение: встроенный блок; позиция: абсолютная; верх: 80%; слева: 150%; трансформировать: транслировать(-50%, 300%); положение: относительное; z-индекс: 103; } .score-текст{ белый цвет; отображение: встроенный блок; } #valueIndex { цвет: зеленый; дисплей: гибкий; оправдание-содержание: центр; /* Центрировать по горизонтали */ выровнять-элементы: по центру; /* Центрировать по вертикали */ верх: 50%; осталось: 50%; трансформировать: транслировать(28%, -50%); ширина: 98vw; семейство шрифтов: «RooneySans», без засечек; размер шрифта: 3rem; [*] Что стоит больше WWM Играть Режимы игры Что стоит больше Играть Выберите игровой режим Классический Закрыть VS

Оценка: 0
${item2.name} ${item2.value}     ${item1.name} ${item1.value} ${item2.value               ${item1.value Более Меньше




Перепробовал все, меня раздражает код, я знаю, что это мой код, который я написал, но не могу понять, как его исправить, заранее спасибо!