Why won't my content center - html

Question

Hi I'm creating a header with a full page image, naviagetion ect. Overlaying the image I have text which welcomes the user to the site, shows the address, shows the opening times during the weekdays and the weekend, and also displays the phone number of the business.
However I can't get the content to center on the image, it's stuck on the left hand side. Any idea why this may be the case? I'm trying to center #openingContent, and #addressHours
* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
h2,
h3,
h4,
h5 {
margin-top: 0;
}
h3 {
display: inline-block;
}
.main-header {}
/* ---- Navigation ---- */
.main-nav {
position: absolute;
top: 1em;
right: 15.9em;
z-index: 1;
}
.main-nav li {
font-size: 17.5px;
display: inline-block;
list-style-type: none;
}
.main-nav li,
.name,
{
font-family: 'Montserrat', sans-serif;
}
.main-nav a {
font-size: .95em;
color: #fff;
text-transform: uppercase;
}
.main-nav a:hover {
color: #FFAB0F;
}
.name a,
.main-nav a {
padding: 10px 15px;
text-align: center;
display: block;
text-decoration: none;
}
.name {
font-size: .95em;
color: #fff;
display: inline-block;
position: absolute;
top: 1.34em;
left: 6em;
z-index: 1;
line-height: 18px;
}
.name a {
color: #fff;
margin-top: -25px;
}
.contactButton {
top: 1.24em;
right: 6em;
z-index: 1;
position: absolute;
border-radius: 100%;
background-color: #004C4C;
color: #fff;
border: none;
padding: 5px 10px;
}
.contactButton:hover {
background-color: #fff;
color: #000;
}
/*Image Header*/
#openingContent {
font-family: 'EB Garamond', serif;
color: #fff;
position: absolute;
z-index: 1;
top: 5em;
text-align: center;
}
.headline {
font-size: 55px
}
.headline2 {
margin-top: 6%;
font-size: 85px;
}
#addressHours {
color: #fff;
position: absolute;
z-index: 1;
top: 15.5em;
line-height: 1.8;
font-style: italic;
text-align: center;
}
.mainImage {
filter: brightness(50%);
}
.fullPageImage {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
}
<header class="main-header">
<h1 class="name">Title</h1>
<nav class="main-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Enquiries</li>
<li>Reviews</li>
<li>Location</li>
</ul>
</nav>
<input type="button" class="contactButton" value="Bookings">
<div id="mix">
<div id="openingContent">
<h1 class="headline">Welcome to</h1>
<h2 class="headline2">Our restaurant</h1>
</div>
<div id="addressHours">
<span class="address">This is our address.........</span><br>
<span class="hours">Monday - Friday: <span class="time">7am - 8pm</span></span><br>
<span class="hours">Saturday & Sunday: <span class="time">10am - 4pm</span></span><br>
<span class="phone"><span class="call">(Call)</span>: [phone]</span>
</div>
</div>
<img src="http://lorempixel.com/200/200" class="fullPageImage mainImage"/>
</header>
<div class="about">
<h2 class="customertitle">What our customers love about us!</h2>
<section class="section">
<h3 class="section-title">Great Coffee</h3>
<p class="para">Enjoy our award winning coffee, while you relax at our great scenic location.</p>
<img src="http://lorempixel.com/15/15" class="image">
</section>
<section class="section">
<h3 class="section-title">Free Wifi!</h3>
<p class="para">Free Wifi to enable you to work away to your hearts content, or hire space for meetings.</p>
<img src="http://lorempixel.com/15/15" class="image">
</section>
<section class="section">
<h3 class="section-title">Loyalty Cards</h3>
<p class="para">We like to rewards our loyal customers. For every 9 coffees, enjoy your 10th for free.</p>
<img src="http://lorempixel.com/15/15" class="image">
</section>
</div>

Answer 1

Add left: 50%; and ´transform: translateX(-50%); to the absolutely positioned #openingContent to move it into the horizontal center of its container:
(BTW: Don't use a closing tag on img elements!)
* {
box-sizing: border-box;
}
html,body {
margin:0;
padding:0;
height: 100%;
width: 100%;
}
h2, h3, h4, h5 {
margin-top: 0;
}
h3 {
display: inline-block;
}
.main-header{
}
/* ---- Navigation ---- */
.main-nav {
position: absolute;
top: 1em;
right: 15.9em;
z-index: 1;
}
.main-nav li{
font-size: 17.5px;
display: inline-block;
list-style-type: none;
}
.main-nav li,
.name,
{
font-family: 'Montserrat', sans-serif;
}
.main-nav a {
font-size: .95em;
color: #fff;
text-transform: uppercase;
}
.main-nav a:hover {
color: #FFAB0F;
}
.name a,
.main-nav a {
padding: 10px 15px;
text-align: center;
display: block;
text-decoration: none;
}
.name {
font-size: .95em;
color: #fff;
display: inline-block;
position: absolute;
top: 1.34em;
left: 6em;
z-index: 1;
line-height: 18px;
}
.name a {
color: #fff;
margin-top: -25px;
}
.contactButton {
top: 1.24em;
right: 6em;
z-index: 1;
position: absolute;
border-radius: 100%;
background-color: #004C4C;
color: #fff;
border: none;
padding: 5px 10px;
}
.contactButton:hover {
background-color: #fff;
color: #000;
}
/*Image Header*/
#openingContent {
font-family: 'EB Garamond', serif;
color: #fff;
position: absolute;
z-index: 1;
top: 5em;
text-align: center;
left: 50%;
transform: translateX(-50%);
}
.headline {
font-size: 55px
}
.headline2 {
margin-top: 6%;
font-size: 85px;
}
#addressHours {
color: #fff;
position: absolute;
z-index: 1;
top: 15.5em;
line-height: 1.8;
font-style: italic;
text-align: center;
}
.mainImage {
filter: brightness(50%);
}
.fullPageImage {
height: 100%;
width: 100%;
margin: auto;
display: table;
top: 0;
background-size: cover;
}
<!DOCTYPE html>
<html>
<head>
<title>Wake Cup Coffee House | Dublin</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="normalize.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat|Varela+Round|EB+Garamond|Roboto|Neuton|Slabo+27px" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script src="Analytics/analytics.js"></script>
</head>
<body>
<header class="main-header">
<h1 class="name">Title</h1>
<nav class="main-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Enquiries</li>
<li>Reviews</li>
<li>Location</li>
</ul>
</nav>
<input type="button" class="contactButton" value="Bookings">
<div id="mix">
<div id="openingContent">
<h1 class="headline">Welcome to</h1>
<h2 class="headline2">Our restaurant</h1>
</div>
<div id="addressHours">
<span class="address">This is our address.........</span><br>
<span class="hours">Monday - Friday: <span class="time">7am - 8pm</span></span><br>
<span class="hours">Saturday & Sunday: <span class="time">10am - 4pm</span></span><br>
<span class="phone"><span class="call">(Call)</span>: [phone]</span>
</div>
</div>
<img src="http://placehold.it/600x600/fca" class="fullPageImage mainImage">
</header>
<div class="about">
<h2 class="customertitle">What our customers love about us!</h2>
<section class="section">
<h3 class="section-title">Great Coffee</h3>
<p class="para">Enjoy our award winning coffee, while you relax at our great scenic location.</p>
<img src="images/coffee.png" class="image">
</section>
<section class="section">
<h3 class="section-title">Free Wifi!</h3>
<p class="para">Free Wifi to enable you to work away to your hearts content, or hire space for meetings.</p>
<img src="images/wifi.png" class="image">
</section>
<section class="section">
<h3 class="section-title">Loyalty Cards</h3>
<p class="para">We like to rewards our loyal customers. For every 9 coffees, enjoy your 10th for free.</p>
<img src="images/savings.png" class="image">
</section>
</div>
</body>
</html>

Answer 2

If I'm getting your question right then, you should not use <img> for background image. Instead use CSS body { background-image: url("your_image.jpeg"); }
Then align text to center might be by using CSS property text-align: center

Answer 3

Maybe change it like this?
<div class="parent">
<div class="child">
(copy your content here)
</div>
</div>
so that the parent container has a background image, and the child has all the content. And the child is really centered in the parent
.parent {
position: relative;
background-image: url("img/image.png");
background-color: #cccccc;
}
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
See https://css-tricks.com/centering-css-complete-guide/
specifically this https://codepen.io/chriscoyier/pen/lgFiq