style.css

.conteneur{
  width: 300px;
  height: 300px;
  border: 1px #aaa solid; 
  text-align: center;
}
ul {
  list-style  : none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #e7e7e7;
  background-color: #f3f3f3;
}

li {
  float: left;
  list-style  : none;
}

li a {
  display: block;
  list-style  : none;
  color: rgb(100, 99, 99);
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #ddd;
  list-style  : none;
}

li a.active {
  color: white;
  list-style  : none;
  background-color: #4CAF50;
  text-align: center;
}
  h1, h2, h3, h4, h5, h6 { 
    font: normal 200% 'News Cycle', arial, sans-serif;
    color: #222;
    margin: 0 0 15px 0;
    padding: 15px 0 5px 0;
    text-align: center;
  }

  h2 { 
    font: normal 170% 'News Cycle', arial, sans-serif;
    color: #666;  
    margin: 0;
    padding: 0 0 8px 0;
    text-align: center;
  }
   
  h4 { 
    margin: 0;
    padding: 0 0 5px 0;
    font: normal 110% arial, sans-serif;
    color: #999;
    line-height: 1.5em;
    text-align: center;
  }
  img {
    border-radius: 50%;
    }