<div class="wrapper">
  <div class="title">
    <h1>Image Webp</h1>
    <div class="image-group">
      <div class="image-box">
        <h2>Webp</h2>
         <img src="http://hayachi.github.io/images/hayachi.webp" alt="はやちwebp">
      </div>
      <div class="image-box">
        <h2>Png</h2>
        <img src="http://hayachi.github.io/images/hayachi.png" alt="はやちwebp">
      </div>
    </div>
  </div>
</div>

body{
  background: #dfecf5;
  font-family: 'Comfortaa', cursive;
}

.title{
  display: block;
  text-align:center;
  padding:50px 0px 0px 0px;
  color: #3b4347;
  h1{
    letter-spacing: 2px;
    font-weight: 400;
    font-size:50px;
  }
  h2{
  letter-spacing: 2px;
  font-size:20px;
  }
}

.image-group{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.image-box{
  width: 50%;
  box-sizing:border-box;
  padding: 0px 50px;
}

img{
    width: 100%;
    height: auto;
    display: block;
}