缩小时网页上出现多余的白色 space

Question

我正在尝试修复当我将我的网站缩小到 768 像素时左侧似乎有太多空白，我无法弄清楚它来自哪里以及如何修复它，我试图删除默认的填充和边距，并更改图像的大小，但这似乎并没有解决问题。我会 post 一些代码。任何帮助将不胜感激。

{
  margin: 0px;
  padding: 0px;
}

div.item {
    /* To correctly align image, regardless of content height: */
    vertical-align: top;
    display: inline-block;
    /* To horizontally center images and caption */
    text-align: center;
    /* The width of the container also implies margin around the images. */
    width: 120px;
  position: relative;
  left: 30%;
  color: #f8d501;

}
img {
    width: 100px;
    height: 100px;

    
     border: solid 5px #f8d501;
}
.caption {
    /* Make the caption a block so it occupies its own line. */
    display: block;
    color: #f8d501;
}



div.item-1 {
    /* To correctly align image, regardless of content height: */
    vertical-align: top;
    display: inline-block;
    /* To horizontally center images and caption */
    text-align: center;
    /* The width of the container also implies margin around the images. */
    width: 120px;
    padding-top: 40px;
       position: relative;
  left: 30%;
  color: yellow;

}
img {
     max-width: 100%;
  height: auto;
  
}
.caption-1 {
    /* Make the caption a block so it occupies its own line. */
    display: block;
    color: #f8d501;
    font-family: 'Verdana-bold';
}

  h1 {
    padding-top: 20px;
    color: #fad700;
  transform: rotate(-90deg);
  font-size: 50px;
}


body {
    background-color: #0d395e;
}

.logo-floatRight {
  padding-left: 20px;
  display: flex;
  border: none;
    max-width: 100%;
  height: auto;
}

.logo-floatLeft {
  padding-left: 20px;
  display: inline-block;
  border: none;
   max-width: 100%;
  height: auto;
    padding: 10px;

}

.flex-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding-left: 35%;
    max-width: 600px;
  height: auto;

}

.logoHeader{
    color: #f8d501;
    font-family: "Franklin Gothic Heavy regular"
    padding: 10px;
      max-width: 100%;
  height: auto;
}

.text{
    color: #f8d501;
    text-align: center;
    padding-right: 30px;
}


.logo-floatLefts{
border: none;
width: 100%;

 
  height: auto;
}




@media only screen and (max-width: 768px) {
  img {
     width: 60%;
  
}

.logoHeader{
  font-size: 15px;
}


.flex-container{
 width: 120px;
 height: 120px;
 

}
.caption {
font-size: 12px;

}

.item {
font-size: 15px;

}


}

}

<div class="main">
     <div class="showcase-content">
<div class="flex-container">
    <img src="https://via.placeholder.com/150" class="logo-floatLeft" alt="logo">
    <h2 class="logoHeader">LATIN<br>AMERICAN<br>FILM<br>FESTIVAL IN<br>AUSTRALIA</h2>
     <img src="https://via.placeholder.com/150" class="logo-floatRight" alt="logo"> 
</div>

<div class="item">
    BRAZIL 
    <img src="https://via.placeholder.com/150"/>
 <span class="caption">LIFE IS A BITCH<br>Como e Cruel Viver Assim</span>
</div>
<div class="item">
    CHILE
     <img src="https://via.placeholder.com/150"/>
   <span class="caption">BROKEN PANTIES<br>Colzones Ratos</span>
</div>
<div class="item">
    COLOMBIA
     <img src="https://via.placeholder.com/150"/>
     <span class="caption">BAD LUCKY GOAT<br>El Dia De La Cabra</span>
</div>
<div class="item">
    COSTA RICA
   <img src="https://via.placeholder.com/150"/>
    <span class="caption">THE GAZELLE'S DANCE<br>El Baile La Gacela </span>
</div>
<div class="item">
    CUBA
    <img src="https://via.placeholder.com/150"/>
   <span class="caption">FALLEN GODS<br>Los Dioses Rotos</span>
</div>

<br> 
<div class="item-1">
    ECUADOR
    <img src="https://via.placeholder.com/150"/>
   <span class="caption-1">QUIJOTES NEGROS<br>Quijotes Negros</span>
</div>
<div class="item-1">
    EL SALVADOR
   <img src="https://via.placeholder.com/150"/>
   <span class="caption-1">THE PATH OF THE SHADOWS<br>El Camino De Las Sombras</span>
</div>
<div class="item-1">
     GAUTEMALA
     <img src="https://via.placeholder.com/150"/>
      <span class="caption-1">WHERE ALL ROADS END<br>Donde Acaban Los Caminos.</span>
</div>
<div class="item-1">
    MEXICO 
    <img src="https://via.placeholder.com/150"/>
 <span class="caption-1">MARA'AKAME'S DREAM<br>El Sueno Del Mara'akame</span>
</div>
<div class="item-1">
    PANAMA
    <img src="https://via.placeholder.com/150"/>
       <span class="caption-1">GRACE & SPLENDOUR<br>Donaire Y Esplendo</span>
</div>


<br>
<div class="item-1">
<h1> FREE<br>EVENT </h1>  
    
</div>



<div class="item-1">
    PARAGUAY
   <img src="https://via.placeholder.com/150"/>
    <span class="caption-1">THE HEIRESSES<br>Las Herederas</span>
</div>
<div class="item-1">
    PERU
   <img src="https://via.placeholder.com/150"/>
   <span class="caption-1">OLD FRIENDS<br>Viejos Amigos</span>
</div>
<div class="item-1">
     URUGUAY
    <img src="https://via.placeholder.com/150"/>
 <span class="caption-1">THE POPES TOILET<br>El Bano Del Papa.</span>
    
</div>

<div class="item-1">
    ARGENTINA
    <img src="https://via.placeholder.com/150"/>
   <span class="caption-1">MAN FANCING SOUTHEAST<br>Hombre Mirando al Sudeste</span>
</div>


<div class="text">

<h3>FIND OUT WHEN FESTIVAL IS COMING TO YOUR CITY AT<br>WWW.FACEBOOK.COM/LAFFAUSSIE</h3>


<img src="footer.png" class="logo-floatLefts" alt="logo">
</div>

</div>

</div>

Answer 1

开头的padding:0和margin:0是body，我想你忘了写了。如果这没有解决，请通过评论检查每个部分，看看哪个部分的宽度更大以留下空白。

Answer 2

我刚刚从项目 item-1 flex-container class 中删除了您的额外边距和填充，并且仅添加了 vertical-align 和 text-align 中心。并且左侧没有额外的边距或填充。所有内容都保留在中心。希望它能解决你的问题。我还从媒体查询中删除了 img 和 flex-container class。

{
      margin: 0px;
      padding: 0px;
    }

    div.item {
        /* To correctly align image, regardless of content height: */
        vertical-align: top;
        display: inline-block;
        /* To horizontally center images and caption */
        text-align: center;
        /* The width of the container also implies margin around the images. */
        width: 120px;
      position: relative;
      color: #f8d501;

    }
    img {
        width: 100px;
        height: 100px;

        
         border: solid 5px #f8d501;
    }
    .caption {
        /* Make the caption a block so it occupies its own line. */
        display: block;
        color: #f8d501;
    }



    div.item-1 {
        /* To correctly align image, regardless of content height: */
        vertical-align: top;
        display: inline-block;
        /* To horizontally center images and caption */
        text-align: center;
        /* The width of the container also implies margin around the images. */
        width: 120px;
        padding-top: 40px;
           position: relative;
      color: yellow;

    }
    img {
         max-width: 100%;
      height: auto;
      
    }
    .caption-1 {
        /* Make the caption a block so it occupies its own line. */
        display: block;
        color: #f8d501;
        font-family: 'Verdana-bold';
    }

      h1 {
        padding-top: 20px;
        color: #fad700;
      transform: rotate(-90deg);
      font-size: 50px;
    }


    body {
        background-color: #0d395e;
    }

    .logo-floatRight {
      border: none;
    max-width: 100%;
    height: auto;
    padding: 10px;
    }

    .logo-floatLeft {
      border: none;
       max-width: 100%;
      height: auto;
        padding: 10px;

    }
    .center-text {
      text-align: center;
    }
    .flex-container {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      justify-content: center;

    }

    .logoHeader{
        color: #f8d501;
        font-family: "Franklin Gothic Heavy regular"
        padding: 10px;
          max-width: 100%;
      height: auto;
    }

    .text{
        color: #f8d501;
        text-align: center;
        padding-right: 30px;
    }


    .logo-floatLefts{
    border: none;
    width: 100%;

     
      height: auto;
    }




    @media only screen and (max-width: 768px) {


    .logoHeader{
      font-size: 15px;
    }

    .caption {
    font-size: 12px;

    }

    .item {
    font-size: 15px;

    }


    }

<div class="main">
         <div class="showcase-content">
    <div class="flex-container">
        <img src="https://via.placeholder.com/150" class="logo-floatLeft" alt="logo">
        <h2 class="logoHeader">LATIN<br>AMERICAN<br>FILM<br>FESTIVAL IN<br>AUSTRALIA</h2>
         <img src="https://via.placeholder.com/150" class="logo-floatRight" alt="logo"> 
    </div>
    <div class="center-text">
    <div class="item">
        BRAZIL 
        <img src="https://via.placeholder.com/150"/>
     <span class="caption">LIFE IS A BITCH<br>Como e Cruel Viver Assim</span>
    </div>
    <div class="item">
        CHILE
         <img src="https://via.placeholder.com/150"/>
       <span class="caption">BROKEN PANTIES<br>Colzones Ratos</span>
    </div>
    <div class="item">
        COLOMBIA
         <img src="https://via.placeholder.com/150"/>
         <span class="caption">BAD LUCKY GOAT<br>El Dia De La Cabra</span>
    </div>
    <div class="item">
        COSTA RICA
       <img src="https://via.placeholder.com/150"/>
        <span class="caption">THE GAZELLE'S DANCE<br>El Baile La Gacela </span>
    </div>
    <div class="item">
        CUBA
        <img src="https://via.placeholder.com/150"/>
       <span class="caption">FALLEN GODS<br>Los Dioses Rotos</span>
    </div>
  </div>
    <br> 
    <div class="center-text">
    <div class="item-1">
        ECUADOR
        <img src="https://via.placeholder.com/150"/>
       <span class="caption-1">QUIJOTES NEGROS<br>Quijotes Negros</span>
    </div>
    <div class="item-1">
        EL SALVADOR
       <img src="https://via.placeholder.com/150"/>
       <span class="caption-1">THE PATH OF THE SHADOWS<br>El Camino De Las Sombras</span>
    </div>
    <div class="item-1">
         GAUTEMALA
         <img src="https://via.placeholder.com/150"/>
          <span class="caption-1">WHERE ALL ROADS END<br>Donde Acaban Los Caminos.</span>
    </div>
    <div class="item-1">
        MEXICO 
        <img src="https://via.placeholder.com/150"/>
     <span class="caption-1">MARA'AKAME'S DREAM<br>El Sueno Del Mara'akame</span>
    </div>
    <div class="item-1">
        PANAMA
        <img src="https://via.placeholder.com/150"/>
           <span class="caption-1">GRACE & SPLENDOUR<br>Donaire Y Esplendo</span>
    </div>
</div>

    <br>
    <div class="center-text">
    <div class="item-1">
    <h1> FREE<br>EVENT </h1>  
        
    </div>



    <div class="item-1">
        PARAGUAY
       <img src="https://via.placeholder.com/150"/>
        <span class="caption-1">THE HEIRESSES<br>Las Herederas</span>
    </div>
    <div class="item-1">
        PERU
       <img src="https://via.placeholder.com/150"/>
       <span class="caption-1">OLD FRIENDS<br>Viejos Amigos</span>
    </div>
    <div class="item-1">
         URUGUAY
        <img src="https://via.placeholder.com/150"/>
     <span class="caption-1">THE POPES TOILET<br>El Bano Del Papa.</span>
        
    </div>

    <div class="item-1">
        ARGENTINA
        <img src="https://via.placeholder.com/150"/>
       <span class="caption-1">MAN FANCING SOUTHEAST<br>Hombre Mirando al Sudeste</span>
    </div>
</div>

    <div class="text">

    <h3>FIND OUT WHEN FESTIVAL IS COMING TO YOUR CITY AT<br>WWW.FACEBOOK.COM/LAFFAUSSIE</h3>


    <img src="footer.png" class="logo-floatLefts" alt="logo">
    </div>

    </div>

    </div>

缩小时网页上出现多余的白色 space

Excess white space on webpage when shrunk

html

css

whitespace