포트폴리오1 랜딩페이지 실습 backgroundimage 적용안됨

<div class="portfolio">
     <h4>What we can Do</h4>
     <div class="portfolio-container">
       <div class="portfoli1">
         <!-- -->
        <div class="portfolio-text1">
           <h4>Stationary</h4>
           <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit
           </p>
        </div>
       </div>
       <!-- <div class="portfoli2">
       
        <div class="portfolio-text2">
          <h4>Stationary</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit
        </p>
        </div>
      </div>
      <div class="portfoli3">
       
        <div class="portfolio-text3">
          <h4>Stationary</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit
          </p>
        </div>
      </div>
      <div class="portfoli4">
       
       <div class="portfolio-text">
          <h4>Stationary</h4>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit
          </p>
       </div>
      </div> -->
     </div>
   </div>
.portfolio {
  padding-top: 60px;
  padding-bottom: 60px;
  text-align: center;
}
.portfolio-container {
  text-align: left;
  max-width: 1200px;
  margin: auto;
}
.portfolio1 {
 float:left;
  width: 50%;
  height: 300px;
  background-image: url(../img/portfolio-1.jpg);
  background-size: cover;
}

css에서 background image를 적용하려는데 백그라운드가 적용이 안되네요 왜그런걸까요?ㅠㅠ 안돼서 그냥 이미지로 넣을려는데 그렇게 해도될까요..그리고 clear:both를 어디다 넣어야좋을까요 맨마지막에 넣으면 될까요