Das div "wwst" ist in 3 Teile unterteilt. Darunter befindet sich das div "unsere spiele" (row/column). Das div passt sich an den Text an, was sein muss, damit beim Verkleinern des Browserfensters keine Textfelder überlappen. Und weil das div sich an den Text anpasst und der Text nicht immer gleichlang ist, gibt es Lücken.

CSS

/* wwsta */

* {
  box-sizing: border-box;
}

.wwst {
  float: left;
  width: 33.33%;
  padding: 20px;
  height: 450px;
}

.wwsta:after {
  content: "";
  display: table;
  clear: both;
}
          
/* Unsere Spiele */

html {
  box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.column {
  float: left;
  width: 33.3%;
  margin-bottom: 16px;
  padding: 0 8px;
}
                  
@media screen and (min-width: 601px) {
  div.row {
    font-size: 15px;
    clear:both;
  }
  
  div.wwsta {
    font-size: 15px;
  }
  
  div.wwst {
    height: 100%;
  }
}

@media screen and (max-width: 600px) {
  div.row {
    font-size: 5px;
  }

  div.wwsta {
    font-size: 5px;
  }

  div.wwst {
    height: 100%;
  }
}
                          
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}

.container {
  padding: 0 16px;
}

.container::after, .row::after {
  content: "";
  clear: both;
  display: table;
}

HTML

<div class="wwsta">
  <div class="wwst" style="background-color:#303030;">
    <h1>text</h1>
    <p>text</p>
  </div>
  <div class="wwst" style="background-color:#ff8c00;">
    <h2>text</h2>
    <br>
    <p>text</p>
  </div>
  <div class="wwst" style="background-color:#303030;">
    <h1>text</h1>
    <br>
    <p>text</p>
  </div>
 </div>
 <div class="row">
 <div class="column">
   <div class="card">
     <img src="bilder/usp1.jpg" alt="text" style="width:100%">
     <div class="container">
       <h2>text</h2>
       <br>
       <p>text</p>
     </div>
   </div>
 </div>
 <div class="column">
   <div class="card">
     <img src="bilder/usp2.jpg" alt="text" style="width:100%">
     <div class="container">
       <h2>text</h2>
       <p>text</p>
     </div>
   </div>
 </div>
 <div class="column">
   <div class="card">
     <img src="bilder/usp3.jpg" alt="text" style="width:100%">
     <div class="container">
       <h2>text</h2>
       <p>text</p>
     </div>
   </div>
 </div>
 </div>

Ich komme einfach nicht weiter und einen teuren Web-Designer will ich für diesen einen Fehler auch nicht anheuern.

Vielen Dank schon einmal im Voraus!

Unswar muss ich für die in Schule eine Homepage programmieren mit html bei Notepad++ und meine Fragenkatalog ob mir njemand helfen kann wie ich anfangen kann wie ihr zumbeisoiel anfangen würdet.

danke im vorraus