Массивный белый раздел справа от экрана браузера - как удалить?

Question

Привет всем: я работаю над веб-страницей, однако на моей домашней странице есть огромное белое пространство в правой части экрана, рядом с тем местом, где должно заканчиваться фоновое изображение. Однако это просто проблема на главном экране, поэтому я решил, что это как-то связано с тем, как я настроил CSS для этого конкретного представления. Есть какие-нибудь предложения, как я могу это исправить, не нарушая положения других элементов CSS на домашней странице? Приветствия

Компонент домашней страницы: Home.jsx

import React from 'react'
import './styles.css'
import hashi_logo_2 from './Photos/hashi_logo_2.png'
import TileList from './TileList'
import OnNextList from './OnNextList'
import Nav from './Nav'
import twitter_logo from './Photos/twitter_logo.png'
import facebook_logo from './Photos/facebook_logo.png'
const XMLParser = require('react-xml-parser')

class Home extends React.Component {
    constructor() {
        super()
        this.state = {
          beers:[],
          isLoading:false
        }
      }

    componentDidMount() {
        const url = 'http://www.hashigozake.co.nz/taplist.xml'
        const proxyURL = 'https://cors-anywhere.herokuapp.com/'

        this.setState({
          isLoading: true
        })

        fetch(proxyURL + url)
        .then(res => res.text())
        .then(beerXML => {
          let beerJs = new XMLParser().parseFromString(beerXML)
          this.setState({
            isLoading:false,
            beers: beerJs
          })
        })

      }

    render() {

    return (
        <div className = 'home'>
            <div className = 'home-nav'>
                <Nav/>
            </div>
              <main>
                  <div className='main__image'>
                      <img src= {hashi_logo_2}/>
                  </div>
              </main>
                <div>
                  <h1 className ='h1-new'>On tap next:</h1>
                  {this.state.isLoading === false ?
                    <>
                    <TileList beerList = {this.state.beers}/>
                    <OnNextList beerList = {this.state.beers}/>
                    </>
                    :
                    <h1 className = 'loading-h1'>Loading tap beers....</h1>
                  }
                </div>
                <footer>
                  <a href = 'https://twitter.com/HashigoZake'>
                  <img className = 'img-footer' src = {twitter_logo} ></img>
                  </a>
                  <a href ='https://www.facebook.com/hashigonz'>
                  <img className = 'img-footer' src = {facebook_logo} ></img>
                  </a>
                </footer>

        </div>
    )
}
}

export default Home

CSS для компонента домашней страницы:

html * {
    box-sizing: border-box;
    margin:0px;
    padding:0px;
  
}

body {
    margin: 0px;
    padding:0px;
    background-image: linear-gradient(to top, rgba(245, 246, 252, 0), rgba(0, 0, 0, 0.8)), url('https://www.hashigozake.co.nz/images/newphotos/Hashigo%20Zake-800-52.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    backdrop-filter: brightness(90%);
}

/* Navigation */

.nav {
    margin:0px;
    padding: 15px 0;
    opacity: 0.75;
    position: fixed;
    width:100%;
    font-family: 'Josefin Sans', sans-serif;
    transform: translateY(15px);
    border-bottom: 2px solid white;
}

ul {
    display:flex;
    list-style: none;
    flex-direction: row;
    justify-content: space-around;
    font-size: 10px;
}


.list {
    list-style: none;
    text-decoration: none;
    color: white; 
    font-size: 1.7rem; 
    flex:auto;
    text-align:center;
    min-width:1px;
}

.list:hover{
    color: rgb(211, 17, 17);
}


//Home//

img {
    max-width: 40%;
    height: auto;
}

main {
    text-align: center;
    padding-top: 130px;
    padding-top:180px;
}

.tile-container {
    display:grid;
    margin:auto;
    justify-content: center;
    width:25%;
    grid-row-gap:0.8rem;
    grid-column-gap:0.8rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-template-rows: 1fr fr 1fr 1fr ;
    transform: translateX(-90%); 
    margin-top:2%;
    
}

.tile-container-onNext {
    display:grid;
    margin:auto;
    /* justify-content: center; */
    width:25%;
    height:auto;
    grid-row-gap:0.8rem;
    grid-column-gap:0.8rem;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    grid-template-rows: 1fr fr 1fr 1fr;
    transform: translateX(78%) translateY(-164%);

    
}

.tile {
    width:100%;
    font-size:0.7em;
    color:white;
    font-family: Arial, Helvetica, sans-serif;
    border-radius: 5px;
    border: 1px solid white;
    padding-left:3px;
    min-width:50px;

}

.h1-pouring {
    margin:auto;
    font-family: 'Josefin Sans', sans-serif;
    transform: translateX(-119%);
    font-size:40px;
    width:20.5%;
    border-radius: 5px;
    margin-top:5%;
}

.h1-pouring-onNext {
    font-family: 'Josefin Sans', sans-serif;
    font-size:40px;
    width:20.5%;
    transform: translateY(-710px);
    margin-left:57%;
}

.h1-new {
    transform: translateX(57%) translateY(360%);
    font-size:40px;
}