inline 2 spans inside div - html

Question

html
<div id="container">
<div>
<span>Visit website</span>
<span>View project</span>
</div>
</div>
css
#container {
width: 100%;
padding:0;
background-color: green;
}
div { padding: 0 20px; width: 0px; background:red;overflow:visible; text-align: center;}
span {
background:#222;
color:#fff;
display:inline-block;
margin:10px 10px 0 0;
padding:5px 10px
}
Demo: http://jsfiddle.net/cePe3/445/
How to make the 2 span to be inline with each other in the middle of the container DIV!
Note: code structure must be as its.
thank you

Answer 1

You can use a more modern solution: flexbox
Add display: flex; justify-content: center; to #container and to #container div. It's magic.
Working fiddle: http://jsfiddle.net/cePe3/448/

Answer 2

You have to set your div width to auto
div { padding: 0 20px; width: auto; background:red;overflow:visible; text-align: center;}
https://jsfiddle.net/cePe3/446/

Answer 3

you have to set div width for inline span
div
{ padding: 0 20px;
width: 350px;
background:red;
overflow:visible;
text-align: center;
}
DEMO

Answer 4

make the position absolute for the spans, then add jquery to center the spans, even on resizing of the window:
$( window ).resize(function() {
shuffle();
});
function shuffle() {
$('span').each(function(){
$(this).css('left',($('#container').width()-$(this).width()) / 2);
});
$('#container').find('div').css('height',$('span:first').height()*6);
}
shuffle();
#container {
width: 100%;
padding:0;
background-color: green;
}
div { padding: 0 20px; width: 0px; background:red;overflow:visible; text-align: center;}
span {
position: absolute;
background:#222;
color:#fff;
display:inline-block;
margin:10px 10px 0 0;
padding:5px 10px
}
span:nth-child(2) {
top: 60px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
<div>
<span>Visit website</span>
<span>View project</span>
</div>
</div>