title: CSS - My images are overlapping my text on a smaller screen size
body: <p>On my website the images overlap my main content text when on a smaller screen size. At home it was perfectly fine because my screen is much bigger but now I'm at college and it looks horrible.</p>
  
  <p>Is there anything I could do to fix this?</p>
  
  <pre><code>#content {  
      font-size:16px;
      margin: 0 auto;
      width: 955px; 
  }
  </code></pre>
  
  <p><strong>Here is a picture of the problem:</strong>
  <a href="http://i776.photobucket.com/albums/yy41/tom14431996/problem-1_zpsa410ef94.png" rel="nofollow">http://i776.photobucket.com/albums/yy41/tom14431996/problem-1_zpsa410ef94.png</a></p>
  
  <p>As you can see the image overlaps the text.</p>
  
  <p><strong>This is an example code of how my first image is added:</strong></p>
  
  <pre><code>#imageholder1 {
  float: left;
  left: 2%;
  position: fixed;
  top: 11%;
  border: double;
  border-color: #333;
  </code></pre>
  
  <p>}</p>
  
  <p><strong>And this is my text code:</strong></p>
  
  <pre><code>#content {
      font-size:16px;
      margin: 0 auto;
      width: 955px; 
  }
  </code></pre>