title: Trying to move my image all the way to the left without using a negative margin
body: <p>I am having trouble with a few of my images. The Problem originally occurred when I resized my browser and my logo would be half cut, so you could only see half of it. Of course, it was frustratingly simple. I just had to remove margin-left{ negative value; } Now I am having problems moving my content a few pixels to the left without using the above. I could put it on JS fiddle, but I don't think that would help since the images won't show up. I also don't want to use any positioning. I want to keep it in normal flow.</p>
  
  <p>Any help appreciated!</p>
  
  <pre><code>&lt;div id="rainbow"&gt;
  &lt;img src="images/rainbow.png" alt="rainbow gradient"&gt;
  &lt;/div&gt; 
  
  &lt;div id="header"&gt;
  &lt;p id="logo"&gt;&lt;img src="images/logo.png" alt="Bethan Rainforth a comedic dancer" &gt;
  &lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="danceleft"&gt;
  &lt;img src="images/danceleft.png" alt="dancer to the left kicking"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I still have margin-left as you can see but plan on deleting it once I can figure out how to move the image to the left</p>
  
  <pre><code>#rainbow img {
  width: 149.2%;
  margin-left: -190px;
  margin-right: 20%;
  }
  
  #logo img {
  width: 320px;
  margin-top: -60px;
  }
  
  div.danceleft img {
  width: 20%;
  margin-bottom: -56%;
  
  }
  </code></pre>