Css 文本未调整到浏览器窗口

我最近一直在试验一个用于图像、文本和两列列表的响应容器，当我重新调整文本大小时，它似乎无法使文本适应浏览器窗口。如果你知道为什么会发生这种情况，请告诉我。谢谢大家!

以下是HTML：

<div id="wrapper">
<div class="content">
<img src="http://www.labyrinth.net.au/~toonist/flash_goodies/graphics/image_sizes/rotate_circle_100.gif">
</div>

<div class="maintext">
<h3>Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident deserunt architecto quasi quaerat cupiditate quis harum ipsum ipsa veritatis suscipit iure velit asperiores ipsam vitae reiciendis quos aliquam doloribus repellendus.</p>
<div class="linkleft">
    <ul>
        <li><a href="#unique-identifier1">Left Item 1</a></li>
        <li><a href="#unique-identifier2">Left Item 2</a></li>
        <li><a href="#unique-identifier3">Left Item 3</a></li>
    </ul>
</div>

  <div class="linkright">
    <ul>
        <li><a href="#unique-identifier1">Right Item 1</a></li>
        <li><a href="#unique-identifier2">Right Item 2</a></li>
        <li><a href="#unique-identifier3">Right Item 3</a></li>
    </ul>
</div>
</div>

---

这里还有指向画笔的链接：

固定宽度将迫使div保持该宽度，除非另有说明

使用

将允许它扩展到您喜欢的任何值，然后折叠到您的最小宽度

---

谢谢jBux。你看，我的想法是当浏览器窗口重新调整大小时，所有元素都要保持它们的位置，除了列表，列表应该一个一个堆叠在一起，我不希望它们位于图像下方，大小小于480px。

p {
overflow: hidden;
}

#wrapper {
width:650px
}

.content {
float:left;
margin:0 25px;
}

.maintext {
float:left;
padding-bottom: 25px;
width:500px;
}

.linkleft, .linkright {
display: block;
width: 100%;
}

@media only screen and (min-width: 800px) {
.linkleft, .linkright {
    display: inline-block;
    width: 50%;
    float: left;
    background-color: green;

    }
}

@media only screen and (min-width: 480px) {
.maintext{
    background-color: tomato;
  }
}

max-width: xyz