css - HTML horizontal scroll bar -

i trying add horizontal scroll bar section (<div>) of html page, reason not working. section of page contains number of small images run horizontally across page, don’t want have use scroll bar @ bottom of page scroll through images. want <div> section have scroll bar.

the section of html shown below alongside css tried:

.photos .container {    position: absolute;    top: 700px;    background-color: #00ff00;    left: 10px;    width: 1500px;    height: 220px;    overflow-x: scroll;  }  .photos .container .row .img1 {    position: absolute;    left: 10px;    overflow: hidden;  }  .photos .container .row .img2 {    position: absolute;    left: 190px;    overflow: hidden;  }  .photos .container .row .img3 {    position: absolute;    left: 326px;    overflow: hidden;  }  .photos .container .row .img4 {    position: absolute;    left: 469px;    overflow: hidden;  }  .photos .container .row .img5 {    position: absolute;    left: 779px;    overflow: hidden;  }  .photos .container .row .img6 {    position: absolute;    left: 922px;    overflow: hidden;  }  .photos .container .row .img7 {    position: absolute;    left: 1058px;    overflow: hidden;  }  .photos .container .row .img8 {    position: absolute;    left: 1185px;    overflow: hidden;  }  .photos .container .row .img9 {    position: absolute;    left: 1485px;    overflow: hidden;  }  .photos .container .row .img10 {    position: absolute;    left: 1628px;    overflow: hidden;  }  .photos .container .row .img11 {    position: absolute;    left: 1774px;    overflow: hidden;  }

<div class="photos">    <div class="container">      <div class="row">        <div class="img1">          <img src="images\photos\small\image_00001.jpg">        </div>        <div class="img2">          <img src="images\photos\small\image_00002.jpg">        </div>        <div class="img3">          <img src="images\photos\small\image_00003.jpg">        </div>        <div class="img4">          <img src="images\photos\small\image_00004.jpg">        </div>        <div class="img5">          <img src="images\photos\small\image_00005.jpg">        </div>        <div class="img6">          <img src="images\photos\small\image_00006.jpg">        </div>        <div class="img7">          <img src="images\photos\small\image_00007.jpg">        </div>        <div class="img8">          <img src="images\photos\small\image_00008.jpg">        </div>        <div class="img9">          <img src="images\photos\small\image_00009.jpg">        </div>        <div class="img10">          <img src="images\photos\small\image_00010.jpg">        </div>        <div class="img11">          <img src="images\photos\small\image_00011.jpg">        </div>      </div>    </div>  </div>

oh figured out. changed:-

.photos .container {     position: absolute;     top: 700px;      background-color: #00ff00;     left: 10px;     width: 1500px;     height: 220px;         overflow-x: scroll; }    .photos .container .row {     position: absolute;     top: 700px;      background-color: #00ff00;     left: 10px;     width: 1500px;     height: 220px;         overflow-x: scroll; }