How to place thumbnail images in a line.

<figure id="beginner">
  <img src="beginnermensimage.jpg">      /*Large image*/
 
<div class="thumbnail1">
  <a target="_blank" href="image1.jpg">
    <img src="image1.jpg" alt="Fjords" 
  </a>
 
</div>
 
<div class="thumbnail2">
  <a target="_blank" href="forest.jpg">
    <img src="image2.jpg" alt="Forest" 
  </a>
</div>
 
<div class="thumbnail3">
  <a target="_blank" href="lights.jpg">
    <img src="image3.jpg" alt="Northern Lights" 
  </a> 
</figure>
</div>

img  {                                                                                      
    max-width: 500%;          /*Large image*/
.thumbnail1{
    width:15%;
 
    margin: -220px 10px 0px 10px;
}
 
.thumbnail2{
    width:15%;
    margin: -220px 0px 10px 220px;
}
 
.thumbnail3{
    width:15%;
    margin: -220px 20px 10px 450px;
}
    margin: 10px 10px 0px 0px;
 
 }