Excess white space on webpage when shrunk - html

Question

I'm trying to fix when I shrink my website down to 768 pixels there seems to be too much whitespace on the left side, I am unable to work out where it is coming from and how I can fix it, I've tried to remove the default padding and margins, and changed the size of images, but that didn't seem to solve it. I will post some code. Any help would be appreciated.
{
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

I just removed your extra margin and padding both from the item,item-1, flex-container class, and add only vertical-align and text-align center. And there is no extra margin or padding on the left. all the content remains in the center. Hope it will solve your problem. I also removed img and flex-container class from the media queries.
{
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>

Answer 2

The padding:0 and margin:0 in the start are for body, which I think you have forgot to write.
If that doesn't solve, check each section by commenting to see which section is bigger in width to leave the white spaces.