title: (html/css) Position of image not correct on desktop
body: <p>So I was trying to optimize my website for different ratios.
  However I can not position the image on the left side and the text on the right side on desktop.</p>
  <p>This is my content [html] (text and image):</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>.wrapper{
      width: 100%;
  }
  
  .wrapper img-info{
      width: 100%;
  }
  
  .img-info h2{
      width: 100%;
      padding: 30px 30px 20px;
      font-size: 50px;
      color: #111;
      line-height: 44px;
  }
  
  .img-info p{
      padding: 0px 30px 20px;
      font-size: 16px;
      color: #111;
      line-height: 24px;
  }
  
  .startseite-img{
      width: 100%;
  }
  
  @media only screen and (min-width:768px){
      
      .wrapper{
          width: 600px;
          margin: 0 auto;
      }
      
      .img-info h2{
          width: 100%;
          padding: 20px 0px 0px;
      }
      
      .img-info p{
          padding: 20px 0px 0px;
      }
      
      .startseite-img{
          padding-top: 30px;
      }
  }
  
  @media only screen and (min-width:1000px){
      
      .wrapper{
          width: 1000px;
      }
      
      .wrapper img-info{
          width: 50%;
          float: right;
      }
      
      .img-info h2{
          padding: 20px 0px 0px 30px;
      }
      
      .img-info p{
          padding: 20px 0px 0px 30px;
      }
      
       .startseite-img{
          padding-top: 0px;
          width: 50%;
          float: left;
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrapper"&gt;
    &lt;article class="img-info"&gt;
      &lt;h2&gt;Hi!&lt;/h2&gt;
      &lt;p&gt;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.&lt;/p&gt;
      &lt;p&gt; At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore magna aliquyam erat, sed diam voluptua.&lt;/p&gt;
    &lt;/article&gt;
    &lt;img class="startseite-img" src="https://via.placeholder.com/150"&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>To give you an idea of my problem here's a screenshot: <a href="https://i.stack.imgur.com/EaDye.png" rel="nofollow noreferrer">false positioning with the img</a>
  When you still have any questions about my problem, you can visit the website <a href="http://kevnkkm.de" rel="nofollow noreferrer">kevnkkm.de</a> to see the full html/css source code or just comment on this question!</p>
  <p>Thanks in advance! (Also sorry for the facepalms I might have caused xd)</p>