Добавляя картинку с помощью background-image, загружается не полностью

Картинка с background-image загружается не полностью, видна только часть картинки, что делать? Почему-то в прошлом проекте работало, а сейчас нет.

    * {
      margin: 0;
      padding: 0;
    }

    .main {
      height: 177px;
      background-color: lightskyblue;
    }

    .main a {
      text-decoration: none;
      color: black;
      margin-left: 400px;
      margin-top: 120px;
    }

    .photo {
      background-image: url(lol.jpeg);
      background-size: 220px auto;
      background-repeat: no-repeat;
      margin-top: 115px;
    }

    h2 {
      text-align: center;
    }

    p {
      text-align: center;
    }

    <div class='main'>
      <a href='/'>Pizza</a>
      <a href='/'>About</a>
      <a href='/'>Sushi</a>
    </div>


    <div class='photo'>
      <h2>qwer</h2>
      <p>lkdlsklsklfskdflk</p>

    </div>