JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<meta name="robots" content="index, follow">
<meta http-equiv="imagetoolbar" content="no">
<meta http-equiv="language" content="en">

<head>
    <!-- MenuBar - below 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- ./3 meta tags -->
<title>CENTERED</title>	
    <!-- MenuBar - Bootstrap Core CSS (ddmenu.js, jquery.js & bootstrap.js are the bottom for faster loading)-->
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">	
   <!-- MenuBar & Mine Custom CSS -->
    <link href="css-mb/main-SOLVED.css" rel="stylesheet">
    <!-- /.custom css -->  
</head>

<body>
    <!-- Navigation -->
    <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
        <div class="container">
            <!-- Logo and responsive toggle -->
            <div class="navbar-header"> <!--This div creates a navigation button visible on smaller screens -->
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span><!--These tags create the standard 3-lin button logo on top right corner -->
                    <span class="icon-bar"></span><!--Put the page less than full-screen to see this behavior -->
                    <span class="icon-bar"></span>
                </button>
            </div>
            <div class="collapse navbar-collapse" id="navbar">
                <ul class="nav navbar-nav">
                    <li><a href="#">Home</a></li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown1<span...

CSS

/* chrome android to display background-image */
html{
  height:100%;
  min-height:100%;
}

body {
  overflow-x: hidden;
  padding: 50px 20px 0px 20px;/* 50px: for .navbar-fixed-top.*/
  font-family: 'Didact Gothic', sans-serif, calibri, "lucida sans", verdana, arial, monospace;
  font-size: 12px;
/* chrome android to dispaly background-image */
  min-height:100%;
/* .end */
/*keep footer at bottom*/
  height:100%;
  margin:0; /* for footer*/
/* .end*/
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: #ffff;
  background-color: #B4A890;
  background-image: url("http://www.planwallpaper.com/static/images/Fall-Nature-Background-Pictures.jpg");
  background-position:absolute;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

/* RELEVANT CODE TO CENTERING AN IMAGE HORIZONTALLY & VERTICALLY NO MATTER THE SIZE OF THE WINDOW: */
/* 1. Container to use balance of the space: */
/* Height less (header + footer). 
(Note: My footer is 70, but if use 70 it places extra space below footer and the need to scroll even if window is larger.) */
section {
  height: calc(100% - (50px + 25px)); 
/* Container border for visual testing*/
  border: 2px solid red;
}

/* 2. Center image vertically & horizontally */
.image img {
  position: relative;
  left: 50%;
  top: 50%;
  -webkit-transform: translateX(-50%) translatey(-50%);
  -moz-transform: translateX(-50%) translatey(-50%);
  transform: translateX(-50%) translatey(-50%);
}
/* .END OF RELEVANT CODE */

/* resize images as windows shrinks */
img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}

#footer {
  width:100%;
  min-height:70px; /*for footer background fix*/
  bottom:0;
  left:0;
  font-size: 13px;
/* Container border for visual testing*/
  border: 1px solid blue;
}
.foot {
  padding: 10px 0;
  text-align: center;
  color: #ffffff;
  font-size:13px;
  letter-spacing: 2px;
}