Responsive and compatible css for a list and container

Let's say I have this structure:

<div class="container">
    <h1>demo</h1>
    <div class="listOfSomething">
        <ul>...</ul>
    </div>
</div>

What I'd like to do is:

1. To make is as responsive as I can. So I tried to give "container" a 90% width, but then - how can I center the "listOfSomething" if I don't have an absolute width for its parent? I also want the list to be scroll-able. How can I make the list height proportional? For example - for pc it'll be height:500px, but for mobile-web it'll be height:100px, if you know what I mean.


2. Make it looks good for multiple devices. For example - make some nice changes if it's inside a pc web or a mobile.

Please! only show me live examples (like in jsfiddle) instead of just explaining - that way I'll be able to use it in no time :) Thanks a lot!