title: Centered image and Text to the left pushing image
body: <p>I would like to have the image centered and have text to the left of it. Everything I've tried it either puts the text below the image, above the image or it pushes the image more to the right the more I type. Can anyone help me? I am new to html and css.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
    padding: 0;
  }
  h1 {
    text-align: center;
    border: solid;
    background-color: #FF0000;
  }
  span {
    display: inline-block;
    border: dashed blue;
    color: #ff0000;
    float: left;
  }
  .mainPicture {
    display: block;
    width: 30%;
    margin-left: auto;
    margin-right: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;link type="text/css" rel="stylesheet" href=main.css&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;h1&gt;Welcome&lt;/h1&gt;
    &lt;div&gt;
      &lt;span&gt;  My name is asd asd. I am currently attending  &lt;/span&gt;
      &lt;img src="onlinePicture.jpg" alt="Picture of Me" class="mainPicture"&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>