Dankeschön für eure Antworten!

Habe mich nun mit figure und figcapture versucht. Aaaaaber:

1. ich möchte KEINEN Abstand zwischen den Bildern...das funktioniert nicht mit margin/padding...es bleibt trotzdem ein Abstand...
2. ich möchte gerne einen Ramen legen..."Über uns" sollte links, oben und unten einen Rahmen haben und "Impressum" rechts, oben und unten...alle übrigen nur oben und unten...ich komm einfach nicht dahinter...
   Zudem ist die Ansicht am Smartphone weiterhin Mist...Hier nochmal meine Codes:

  
<figure class="gesamt">  
      <figure class="einzel">  
           <a href="about_us.html"><img src="./images/001.jpg" alt="" /></a><p>  
           <figcaption><a href="about_us.html" class="popup"><img src="./images/ja.png">über uns<img src="./images/ja2.png"></a></figcaption>  
      </figure>  
      <figure class="einzel">  
           <a href="gallery.html"><img src="./images/002.jpg" alt="" /></a><p>  
           <figcaption><a href="gallery.html" class="popup"><img src="./images/ja.png">gallery<img src="./images/ja2.png"></a></figcaption>  
      </figure>  
      <figure class="einzel">  
            <a href="kontakt.html"><img src="./images/003.jpg" alt="" /></a><p>  
           <figcaption><a href="kontakt.html" class="popup"><img src="./images/ja.png">kontakt<img src="./images/ja2.png"></a></figcaption>  
      </figure>  
	  <figure class="einzel">  
            <a href="agb.html"><img src="./images/004.jpg" alt="" /></a><p>  
           <figcaption><a href="agb.html" class="popup"><img src="./images/ja.png">agb<img src="./images/ja2.png"></a></figcaption>  
      </figure>  
	  <figure class="einzel">  
            <a href="impressum.html"><img src="./images/005.jpg" alt="" /></a><p>  
			<figcaption><a href="impressum.html" class="popup"><img src="./images/ja.png">impressum<img src="./images/ja2.png"></a></figcaption>  
      </figure>  
  
   </figure>  

figure{
margin: 0;
padding: 0;
}

figure img {
  border: thin dotted white;
  padding: 0;
}
figure.einzel {
  display: inline-block;
  padding: 0;
  width: 19%;
}

figure.einzel {
  display: inline-block;
  padding: 0;
  width: 19%;
}

figure figcaption {
text-align: center;
vertical-align: middle;
text-transform: uppercase;
height:2.5em;
border-left: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
border-top: 2px solid #ffffff;
border-radius: 10px;
padding-bottom: 25px;
background-image: url(./images/shine.png);
}

@media only screen and (max-width:800px) {
  body{
    width: 100%;
    margin: 2% 0;
    padding: 1%;
  }
  figure.einzel {
    width: 48%;
  }
}

@media only screen and (max-width:600px) {
  figure.einzel {
    width: 96%;
  }
}
``

bitte inständig um Hilfe...Danke