ul {
  margin: 0;
  padding: 0;
  list-style: none;
  
  width: 1100px;
  max-width: 100%;
  display: block;
  margin: 0 auto;
  border: solid 4px #ccc;
  
  
  li {
    padding-top: 50px;
    padding-bottom: 50px;
    border: solid 1px #ddd;
    text-align: center;
    font-size: 5em;
    cursor: pointer;
  }
  
  li.red {
    background: red;
    color: #fff;
  }
  li.yellow {
    background: yellow;
  }
  li.blue {
    background: blue;
    color: #fff
  }
}

ul.filter {
  margin: 2em auto;
  
  li {
    padding: 12px;
    font-size: 1em;
    width: 25%;
    float: left;
  }
}

p{
  width: 1100px;
  max-width: 100%;
  display: block;
  margin: 2em auto;
}