Html 最小化页面时，图片覆盖文本

我正在尝试建立一个网站；我更改浏览器窗口的宽度，页面上的图像与文本重叠。我该如何让图像消失呢

代码：

.满足于{
字体系列：无衬线；
宽度：50%；
身高：100%；
填充：0px 10px 0px 10px；
利润上限：-10px；
}
#imageOne{
高度：250px；
浮动：对；
右边距：170px；
利润上限：-150px；
边框：3倍白色；
}

关于我们
段落

为页面的宽度和高度提供值

使用css3，您可以在更改屏幕宽度时使用媒体查询来隐藏HTML元素

.contentAbout{
字体系列：无衬线；
宽度：50%；
身高：100%；
填充：0px 10px 0px 10px；
利润上限：-10px；
}
#imageOne{
高度：250px；
浮动：对；
右边距：170px；
利润上限：-150px；
边框：3倍白色；
}
@媒体屏幕和屏幕（最大宽度：750px）{
#imageOne{
显示：无；
}
}

关于我们
段落

您可以使用以下功能：

<div class="content_wrap">
  <div class = "contentAbout">
    <h2>About us</h2>
    <p> a paragraph</p>
  </div>
  <div class = "aboutImages">
    <img id = "imageOne" src = "http://i.imgur.com/6kbSaGL.png" alt = "Car"/>
  </div>
  <div class="clrb"></div>
</div>
<style>
    .aboutImages{
      float: left;
    }
    .contentAbout{
        float: left;
        font-family: sans-serif;
        width: 50%;
        height: 100%;
        padding: 0px 10px 0px 10px;
        margin-top: -10px;
      }

    .clrb{
        clear:both;
    }

      #imageOne{
        height: 250px;
        margin-right: 170px;
        margin-top: -150px;
        border: 3px outset white;
      }
</style>

关于我们
段落

.关于年龄{
浮动：左；
}
.满足于{
浮动：左；
字体系列：无衬线；
宽度：50%；
身高：100%；
填充：0px 10px 0px 10px；
利润上限：-10px；
}
.clrb{
明确：两者皆有；
}
#imageOne{
高度：250px；
右边距：170px；
利润上限：-150px；
边框：3倍白色；
}