JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
		<!---THIS is the pic in question I'm trying to center--><div id="logo"><img src="http://imgur.com/3PlqF0h.png"></div>
		<div id="row">
			<div class="cell"><img src="http://imgur.com/UTfvaBO.jpg"></div>
			<div class="cell"><img src="http://imgur.com/4oGLXsY.jpg"></div>
			<div class="cell"><img src="http://imgur.com/HuLnI2j.jpg"></div>
			<div class="cell"><img src="http://imgur.com/7aPwvfQ.jpg"></div>                
            </div></div>

CSS

/*table rules!!!*/	    

        .container {
		display:table-row;
		width:100%;
		}
		
		.row {
		display:table-row;
		width:100%;
		}
		
		.cell {
		position:relative;
		display:table-cell;
		background-color:black;
		width:700px;
		height:auto;
		}
		
		body {
		margin:0;
		padding:0;
		}

/*failed logo stuff that isn't working*/
        
        #logo {
		z-index:10;
		position:absolute;
		width:50%;
		margin: 0 auto;
		}