Trouble with Styling list items (unordered) - css

Question

I want to add a list item but it is deleted because I added in my css file display: inline-block, however I cant change this since this is crucial in aligning my content the way that I want. I tried alot of things, but it just won't show :L, anyone got any ideas? Here is the Fiddle:
http://jsfiddle.net/rupsdino1997/gtxe6ojo/1/
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 5000 );
});
hr { /* taken from http://css-tricks.com/examples/hrs/ */
height: 30px;
border-style: solid;
border-color: black;
border-width: 1px 0 0 0;
border-radius: 20px;
}
hr:before { /* taken from http://css-tricks.com/examples/hrs/ */
display: block;
content: "";
height: 30px;
margin-top: -31px;
border-style: solid;
border-color: black;
border-width: 0 0 1px 0;
border-radius: 20px;
}
ul.listing {
list-style:armenian;
}
body {
margin: 0px;
color: #151515;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
background-color: #EFF5F8;
}
#slideshow {
position:relative;
right: 280px;
}
#slideshow IMG {
position:absolute;
top:0;
left:0;
z-index:8;
}
#slideshow IMG.active {
z-index:10;
}
#slideshow IMG.last-active {
z-index:9;
}
#wrapper {
width: 100%;
min-width: 740px;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
border:#6627C9;
background-color:#E2CFAF;
padding-left: 17px;
padding-right: 17px;
}
#slideshow img {
min-width: 740px;
min-height: 400px;
}
#top {
overflow: hidden;
}
h1 {
font-size: 65px;
margin-top: 0px;
margin-bottom: 14px;
color: #3399DD;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
max-width: 100%;
text-align: center;
}
#mainimg img {
max-width: 100%;
padding-top: 2px;
padding-bottom: 2px;
}
h1{
color: #3399CC;
font-weight: 600;
font-size: 36px;
}
.centered {
margin-left: auto;
margin-right: auto;
}
footer {
padding-top: 2px;
padding-bottom: 2px;
padding-left: 2%;
background-color: #43a6cb;
color: #FFFFFF;
position: relative;
bottom: 0px;
}
a {
font-weight: bold;
text-decoration: none;
}
a:link {
color: #FF6600;
}
a:visited {
color: #FF944C;
}
#mainnav a:hover ,#mainnav a:active,#mainnav a:focus , #mainnav a.thispage{
color: #FFFFFF;
text-decoration: none;
background-color: #43A6CB;
}
#mainnav ul {
list-style-type: none;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#mainnav a {
width: 20%;
background-color: #4D4D4D;
text-align: center;
text-transform: uppercase;
color: #FFFFFF;
padding-top: 6px;
padding-bottom: 6px;
display: block;
float: left;
}
#wrapper #main .horizontal img {
height: 250px;
width: 200px;
margin-top: 15px;
}
#wrapper #main ul.horizontal li {
display: inline-block;
font-size: 16px;
padding: 1em;
text-align: justify;
vertical-align: top;
width: 50%;
}
ul.horizontal {
list-style:circle;
margin: 0;
padding: 0;
font-size: 0;
}
img{
display: block;
}
*
{
box-sizing: border-box;
}
#main {
padding-left: 10px;
paddin-right: 10px;
}
.listing {
display:list-item;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="wrapper">
<header id="top">
<h1 style="font-size:60px">L'Auberge De Napoleon III</h1>
<nav id="mainnav">
<ul>
<li>Home</li>
<li>Features</li>
<li>Activities</li>
<li>Contact US</li>
<li>Pricing</li>
</ul>
</nav>
</header>
<article id="main">
<ul class="horizontal" style=" padding:0">
<li>
<div style="position:relative; left: 10px">
<p style="padding-bottom: 0pt; padding-top: 0pt; font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:100px; position:relative; top:8px; color:#3D2E16; font-size:15px;">
<ul class="listing" style="padding-left:0px">
<li>Living Room</li>
<li>Library</li>
<li>oo</li>
<li>ff</li>
<li>ff</li>
<li>ff</li>
<li>ff</li>
<li>ff</li>
</ul>
</p>
</div>
</li>
<li>
<div id="slideshow">
<img src="http://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg" width="1000">
<img src="http://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg">
<img src="http://upload.wikimedia.org/wikipedia/commons/1/1e/Stonehenge.jpg" class="active">
</div>
</li>
</ul>
<hr width="80%">
<p style="margin: 0px 16px 30px 17px; font-family:Gotham, 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight:100px; position:relative; left: 10px; color:#3D2E16; font-size:15px; padding-right: 20px; text-align:justify"> The house has been entirely renovated with respect for the original elements like stone walls, and wooden beams. This 5 bedroom house (sleeps 8) is a well equipped property. Situated in one of the most sunny regions of France it profits from a sunny, sheltered court yard and garage in the basement.
This comfortable property is based in the Languedoc-Roussillon region, famous for its recreational activities as here in Cathar country history meets nature. From the village you can reach famous historic towns such as Perpignan, Carcassonne and Narbonne within an hour. Felines is also close to the medieval village of Lagrasse, one of the “les plus beaux villages de France”. A drive to the sea or Spain equally takes you about an hour. Take advantage of your stay and visit some vintners, as Felines-Termenes is on the “Route des 20”, a local initiative of the wine growers of the Corbieres. With your family or with friends, you will appreciate the calm of this 180 sq.m. property. </p>
</article>
<footer>Powered By Ruben © 2015 </footer>
</div>