Trying To Center Align List Items - html

Question

I have tried margin: 0 auto and text-align targeting all sorts of elements, but can't get the gallery of images to center... what combination of CSS should I use and what div, ul, or li must I target?
Here is the HTML:
<ul class="loop">
<ul id="portfolio-filter"><li>All</li><li>design</li><li>mobile</li><li>web</li></ul> <ul id="portfolio-list">
<li class="fourcol rad_big mobile" style="">
<div class="item_full item_height1">
<div class="imgwrap">
<span class="cats"><h3>Another mobile project</h3>
<p>history app</p>
</span>
<a href="http://zappend.com/myportfolio/another-mobile-project/">
<img width="300" height="199" src="http://zappend.com/wp-content/uploads/2013/11/bg-300x199.jpg" class="attachment-folio wp-post-image" alt="bg" title="" style="opacity: 1;">
</a>
</div>
<div style="clear:both"></div>
<a class="hoverstuff-zoom" rel="prettyPhoto[gallery]" href="http://zappend.com/wp-content/uploads/2013/11/bg.jpg" style="opacity: 0;"><i class="icon-fullscreen"></i></a>
<a class="hoverstuff-link" href="http://zappend.com/myportfolio/another-mobile-project/" style="opacity: 0;"><i class="icon-signout"></i></a>
</div> </li>
<li class="fourcol rad_big design" style="">
<div class="item_full item_height1">
<div class="imgwrap">
<span class="cats"><h3>Design Project 1</h3>
<p>city of birmingham HDR</p>
</span>
<a href="http://zappend.com/myportfolio/design-project-1/">
<img width="300" height="199" src="http://zappend.com/wp-content/uploads/2013/11/city-300x199.jpg" class="attachment-folio wp-post-image" alt="city" title="" style="opacity: 1;">
</a>
</div>
<div style="clear:both"></div>
<a class="hoverstuff-zoom" rel="prettyPhoto[gallery]" href="http://zappend.com/wp-content/uploads/2013/11/city.jpg" style="opacity: 0;"><i class="icon-fullscreen"></i></a>
<a class="hoverstuff-link" href="http://zappend.com/myportfolio/design-project-1/" style="opacity: 0;"><i class="icon-signout"></i></a>
</div> </li>
<li class="fourcol rad_big web" style="">
<div class="item_full item_height1">
<div class="imgwrap">
<span class="cats"><h3>Website Project</h3>
<p>zappend website</p>
</span>
<a href="http://zappend.com/myportfolio/website-project/">
<img width="300" height="199" src="http://zappend.com/wp-content/uploads/2013/11/main-slider-300x199.jpg" class="attachment-folio wp-post-image" alt="main-slider" title="" style="opacity: 1;">
</a>
</div>
<div style="clear:both"></div>
<a class="hoverstuff-zoom" rel="prettyPhoto[gallery]" href="http://zappend.com/wp-content/uploads/2013/11/main-slider.jpg" style="opacity: 0;"><i class="icon-fullscreen"></i></a>
<a class="hoverstuff-link" href="http://zappend.com/myportfolio/website-project/" style="opacity: 0;"><i class="icon-signout"></i></a>
</div> </li>
<li class="fourcol rad_big mobile" style="">
<div class="item_full item_height1">
<div class="imgwrap">
<span class="cats"><h3>Mobile App</h3>
<p>Zappend App</p>
</span>
<a href="http://zappend.com/myportfolio/mobile-app/">
<img width="300" height="199" src="http://zappend.com/wp-content/uploads/2013/11/mobile-app-slider-300x199.png" class="attachment-folio wp-post-image" alt="mobile-app-slider" title="" style="opacity: 1;">
</a>
</div>
<div style="clear:both"></div>
<a class="hoverstuff-zoom" rel="prettyPhoto[gallery]" href="http://zappend.com/wp-content/uploads/2013/11/mobile-app-slider.png" style="opacity: 0;"><i class="icon-fullscreen"></i></a>
<a class="hoverstuff-link" href="http://zappend.com/myportfolio/mobile-app/" style="opacity: 0;"><i class="icon-signout"></i></a>
</div> </li>
</ul>
</ul>

Answer 1

Lol you know how you can still center tables?
Well i had this problem yesterday and i just put my stuff in a table and centered it (but that is only short term and looks crap on mobile browsers. aha but yeah you can do this with some css set your margin 0 auto css to important.. Sometimes other css will be rendered over css that is in the html file. that is why it is better to have it stored elsewhere and it looks nicer.. Anyways to check if it is this load your site in a nice browser like chrome and right click and choose inspect elements and click on the affected image and see what css is running and what isnt..
Check this out on centrering stuff its actually really good aha
Code Pen