CSS Website breiter als Browser-Fenster

Question

Wenn Sie sich die Seite this ansehen, können Sie sehen, dass die Website breiter ist als das Browser-Fenster.

  <section id="grey1" class="wrapper_grey"> 
      <div id="impressions_grey"> 
      <h1>Auftrag</h1> 
      <p>Du benötigst Hilfe bei einem Video oder Fotoprojekt?<br><br></p> 

      <ul> 
       <li><a>Imagefilm</a>  <img class="bubble" src="img/Imagefilm.png"/></li> 
       <li><a>Fotoshooting</a>  <img class="bubble" src="img/Fotoshooting.png"/></li> 
       <li><a>Bewerbungsvideo</a> <img class="bubble" src="img/Interview.png"/></li> 
       <li><a>Actionvideo</a>  <img class="bubble" src="img/Action.png"/></li> 
      </ul> 
      </div> 
     </section> 

Dieser Code verursacht das Problem. Ich habe den Text in der Mitte mit diesem CSS platziert:

#grey1{ 
background-repeat: no-repeat; 
background-size: cover; 
background-position: center; 

/* Setzt Textbereich in (vertikale) Mitte */ 
display:flex; 
align-items: center; 
} 

#grey1 ul{ 
float: left; 
position: relative; 
left: 50%; 
margin: 0 auto; 
padding: 0; 
list-style: none; 
text-align: center; 
} 

#grey1 li{ 
float: left; 
position: relative; 
right: 50%; 
margin: 1em 2em; /*Platz um Bereich*/ 
} 

#grey1 li a{ 
width: auto; 
display: block; 
padding: 6px 10px; /*Platz in Box*/ 

color: white; 
font-size: 20px; /Schriftgröße*/ 
text-decoration: none; 

-webkit-transition: all 0.2s ease; 
transition: all 0.2s ease; 

border-color: white; 
border-width: 2px; 
border-style: solid; 
border-radius: 40px; 
} 

Nun übersteht die UL mein Browser-Fenster. Wie bekomme ich das auf 100% Breite?

Die Verwendung von overflow-x: hidden funktioniert nicht auf mobilen Geräten!

Answer 1

#grey1{ 
    position: relative; 
    padding: 50px 0; 
} 
#grey1 ul{ 
list-style: none; 
margin: 0; 
padding: 0; 
text-align: center; 
} 
#grey1 li{ 
    display: inline-block; 
    padding: 20px; 
} 
#grey1 li a{ 
    display: block; 
    padding: 6px 10px; 
    color: white; 
    font-size: 20px; 
    text-decoration: none; 
    -webkit-transition: all 0.2s ease; 
    transition: all 0.2s ease; 
    border: 2px solid #fff; 
    border-radius: 40px; 
} 

"Bitte bewerben Sie sich auch für die 'Technik' Sektion."