CODEWITHSUNDEEP
javascripthtmlcsswebwidth
Aron
Aron

Reputation: 3

CSS Website wider than Browser-Window

If you look at this Page you can see that the Website is wider than the Browser-Window.

            <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>

This Code causes the problem. I placed the Text in the middle with this CSS:

#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;
}

Now the ul outstands my browser-Window. How do I get this to width 100%?

Using overflow-x: hidden is not working on mobile devices!

Upvotes: 0

Views: 107

Answers (1)

Srikanth Reddy
Srikanth Reddy

Reputation: 345

#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;
}

"Please apply same css for 'Technik' section aswell."

Upvotes: 1

Related Questions