How to create my grid of images into rows of 5

I am trying to make this gallery break up into rows? right now it is one row of 8, but want to break it into half. How would I do that? so like 4 images to a row or 5? Thank you all :) below is a short example of the html and css had to tag beginning of the css like this for some reason. still fresh at programming.

 <section id="Photos">            
        <div class="col-md-12 gallery">
            <h1>Gallery</h1>
            <ul id="photo-gallery">
                <li>
                    <a href="http://ift.tt/1TfyvQi">
                        <img src="http://ift.tt/1TfyvQi">
                    </a>
                </li>
            </ul>
        </div>  
</section>

pound Photos opacity: .88 padding: 0px

pound Photos img width: 10% float: left display: inline-block margin: 5px text-align: center

dot gallery ul list-style: none margin: auto

pound overlay background: rgba(0,0,0, .8) width: 100% height: 100% position: absolute top: 0 left: 0 display: none;

pound overlay img margin: 10% auto 0 width: 550px border-radius: 5px

pound photos width: 100%

pound photo-gallery width: 100%