Centre element horizontally based on available space
<p>Is it possible to centre element horizontally on all the available space left without use of javascript?</p>

<p>I know that if I do <code>margin: 0 auto;</code> it will centre it on screen. However, since I have a sidebar I want content to be centred on the <strong>remaining space</strong>, not the screen space.</p>

<p>I know that it is easy to accomplish using javascript, however I wonder if I can make it work with pure css. (<a href="https://jsfiddle.net/dxb2rr8k/" rel="nofollow">https://jsfiddle.net/dxb2rr8k/</a>)</p>

<p>Javascript code would look something like this (<a href="https://jsfiddle.net/a5n59bxn/" rel="nofollow">https://jsfiddle.net/a5n59bxn/</a>):</p>

<pre><code>$(window).on('resize', function () {
  centerContent();
});

function centerContent() {
  var sidebarWidth = $('.sidebar').width();
  var contentWidth = $('.content').width();
  var windowWidth = $(window).width();

  $('.content').css('margin-left', (windowWidth / 2) - sidebarWidth);
}
</code></pre>