How to properly set width of a div within li - html

Question

I'm trying to give my div inside a li a width value and the div's border has the width I want, but the text I have in that div is ignoring that width and it seems to be inheriting the container width. It's just the text that is doing that, though.
I don't usually work with li tags, so I don't really know what the problem is.
This is basically the HTML I'm working with:
<div id="container">
<div class="inner">
<ul>
<li>
<a class="img" href="..."></a>
<div class="desc">
...
</div>
</li>
</ul>
</div>
</div>
This is the CSS:
#container {
margin:0 auto;
width: 900px;
height: 500px;
box-sizing:border-box;
position:relative;
right: 160px;
-webkit-user-select: none;
user-select:none;
}
#container div.inner {
position:relative;
overflow:hidden;
padding:0;
margin:0;
}
#container div.inner ul {
white-space:nowrap;
position:relative;
left:0; top:0;
list-style:none;
font-size:0;
padding:0;
margin:0;
float:left!important;
width:auto!important;
height:auto!important;
}
#container ul li {
display:inline-block;
margin-top:20px;
margin-bottom:200px;
margin-left:-45px; margin-right:-30px;
-webkit-transform:scale(0.6);
transform:scale(0.6);
-webkit-transition:-webkit-transform 0.5s;
transition:transform 0.5s;
box-sizing:content-box;
text-align:center;
vertical-align:middle;
padding:0;
position:relative;
list-style:none;
backface-visibility:hidden;
}
#container ul li.active {
-webkit-transform:scale(1);
transform:scale(1);
background-color:transparent;
}
#container ul li.active .desc {
display: block;
}
.desc {
display: none;
width: 310px!important;
height: 200px;
border: 1px solid #fff;
position: relative;
right: 350px;
top: 275px;
color: #fff;
font-family: Arial;
font-size: 11px;
padding: 15px;
text-align: justify;
}
#container .img {
width: 200px;
height: 320px;
background-size:contain;
background-repeat:no-repeat;
background-position:center center;
display:block;
position:absolute;
font-size:0;
cursor:inherit;
transition:all linear 0.4s;
}

Answer 1

There seems to be a lot of CSS here that is conflicting. Are you sure you need to use '!important' in so many places?
It's hard to tell what's happening but my feeling is that using position:absolute and float is breaking things.
Also, your div inside the li ("desc") is set to display:block at some point.
Try changing it to inline or inline-block depending on what you need it to look like.
#container ul li.active .desc {
display: block;
}
Then after this you are trying to set a width when it is display:none...
.desc {
display: none;
width: 310px!important;
...
This is probably not showing up because if the display:block taking precedence, because you have been more specific with your selectors. Try doing the same for the .desc section:
#container ul li .desc {
display: none;
width: 310px!important;
...
If you can supply a working Jsfiddle or code snippet so we can see what you are trying to achieve that would help.
I'd also like to rewrite this for you so that you can see there is probably a much easier way to accomplish your layout without all of the conflicts.

Answer 2

in your .desc {} is the second from the bottom padding: 15px;
Try deleting that one.