Can't get content in a div to center on page?
<p>I am trying to get an image, some text, and a form that are in a container div to be centered instead of left justified, but when I try to float the image it just goes right or left and the text gets all screwed up.</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.header, .navBar, .pageTitle {
   margin: 0px;
   padding: 0px;
}
body {
   margin: 0px;
   padding: 0px;
   font-size: 20px;
   background-color: #006464;
}
footer {
   background-color: #bfd8d8;
   position: absolute;
   bottom: 0px;
   width: 100%;
   font-size: 15px;
   border: 1px solid black;
}
nav, h1, h2 {
   font-family: arial, sans-serif;
}
nav a:hover {
   background-color: #006400;
}
nav a {
   color: white;
   text-decoration: none;
}
h2 {
   text-align: center;
   background-color: white;
}
#container {
   width: 1000px;
   margin: auto;
   min-height: 100vh;
   position: relative;
}
#signUp {
   color: white;
   font-size: 20px;
   font-family: arial;
}
#welcomeFont {
   color: white;
   font-size: 25px;
   font-family: arial;
}
.currentNav {
   background-color: #006400;
}
.emailStyle {
   font-weight: bolder;
}
.footerSpacer {
   height: 50px;
}
.header {
   color: white;
   background-color: #006400;
   padding: 20px;
}
.headerAnchor {
   text-decoration: none;
   color: white;
}
.navBar {
   background-color: #228B22;
   padding: 10px;
}
.pageTitle {
   padding-bottom: 0px;
   box-shadow: 0px 8px 25px 0px;
   background-color: #bfd8d8;
}
.poetryAuthor {
   color: white;
   font-size: 15px;
   font-family: arial;
   font-style: italic;
}
.poetryCaptions {
   margin-top: 50px;
   color: white;
   font-size: 25px;
   font-family: georgia, serif;
}
.resizeAbout {
   max-height: 50%;
   max-width: 50%;
   margin-top: 50px;
   margin-bottom: 50px;
}
.resizeHome {
   max-height: 50%;
   max-width: 50%;
   margin-top: 50px;
}
.resizePhotos {
   max-height: 50%;
   max-width: 50%;
}
.table {
   background: #006464;
   max-width: 100%;
   border: 1px solid black;
   border-spacing: 10px;
   margin-left: auto;
   margin-right: auto;
}
.tableData {
   font-size: 19px;
   background: #bfd8d8;
   border: 1px solid black;
   padding: 8px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt; 
&lt;! Must have tables, forms, multimedia, and links &gt;
&lt;head&gt;
&lt;title&gt;Home - The Singular Effect&lt;/title&gt;
&lt;link rel="stylesheet" href="css/style.css"&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="container"&gt;
  &lt;header&gt;
    &lt;h1 class="header"&gt;&lt;a class="headerAnchor" href="index.html"&gt;TheSingularEffect.Com&lt;/a&gt;&lt;/h1&gt;
  &lt;/header&gt;
  &lt;nav class="navBar"&gt; &lt;a class="currentNav" href="index.html"&gt;Home&lt;/a&gt; &lt;a href="music.html"&gt;Music&lt;/a&gt; &lt;a href="photos.html"&gt;Photos&lt;/a&gt; &lt;a href="poetry.html"&gt;Poetry&lt;/a&gt; &lt;a href="about.html"&gt;About&lt;/a&gt; &lt;/nav&gt;
  &lt;h2 class="pageTitle"&gt; Get the Full Effect! &lt;/h2&gt;
  &lt;a href="image/homepage.jpg" target="blank"&gt;&lt;img class="resizeHome" src="image/homepage.jpg" alt="Image of Daniel Adams"&gt;&lt;/a&gt;
  &lt;h3 id="welcomeFont"&gt; Welcome to the home of The Singular Effect! &lt;/h3&gt;
  &lt;br&gt;
  &lt;form&gt;
    &lt;span id="signUp"&gt;Sign up for our newsletter!&lt;/span&gt; &lt;br&gt;
    &lt;input type="text" name="emailaddress" value="Email Address"&gt;
    &lt;input type="submit" value="submit"&gt;
  &lt;/form&gt;
  &lt;div class="footerSpacer"&gt; &lt;/div&gt;
  &lt;footer&gt; &amp;copy; 2016, Chris Hughes - SNHU. Contact me at &lt;span class="emailStyle"&gt;christopher.hughes1@snhu.edu&lt;/span&gt; &lt;/footer&gt;
&lt;/div&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>