JSFiddle - React, Tailwind, and code Playground

HTML

<body >

	<div id="wrapper">
	
		<div id="content">
	
			<div id="parent" class="clearfix">
			
				<div id="image1">								
				</div>
				<div id="image2">								
				</div>
				<div id="image3">								
				</div>
				<div id="image4">								
				</div>
			
			</div>
		
		</div>
	
	</div>

</body>

CSS

#wrapper {
	background:pink; 
	border:5px red solid;			
	}		

#container {
	background:fuchsia; 
	border:5px purple solid;
	}
			
#content {
	background:aqua; 
	border:5px blue solid;
}
			
#parent {
	background:lime; 
  border:5px green solid; 
	}
					
#image1, #image2, #image3, #image4 {
	background:yellow; 
  border:5px orange solid;

/* Each div fill 1/4 screen so get 50% user screen viewport height/width and deduct the height/width of everything outside of the image divs content area (box model).
So here we must deduct the 1 x 5px border on one side (image border) and 4 x 5px borders on the other side (image, parent, content & wrapper borders)*/
	
	height: calc(50vh - (5*5px));	
  
  /* The line below should be the same as above ie:
  width: calc(50vw - (5*5px)) but I need to deduct a further unexplained 9px and now
  the 4 image divs wont fill the screen? */
	width: calc(50% - 10px);
	
	float:left;
	
	/* set and center a background image to the div */
	background-image: url("http://dev.bowdenweb.com/tools/i/pixelgrid.png");
	background-position: center;
	
  }  
  
  	.clearfix:after {
	  content: "";
	  display: table;
	  clear: both;
	}