Website content moves when window is resized
<p>I have created a website and I have a problem since every time the window is resized the content in the website moves and does not remain ordered. </p>

<p>What can I do to fix this problem?
Thanks a lot!</p>

<p>Here is a code sample from my webite:</p>

<pre><code>&lt;section class="nav-panel nav-color" id="nav-panel-2"&gt;
    &lt;div class="img"&gt;
      &lt;a target="_blank" href="images/Starters/starters1.jpg"&gt;
        &lt;img src="images/Starters/starters1.jpg" alt="Restaurant" width="600" height='auto'&gt;
      &lt;/a&gt;
        &lt;div class="desc"&gt;Fried Ravioli&lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="img"&gt;
      &lt;a target="_blank" href="images/Starters/Starters2.jpg"&gt;
        &lt;img src="images/Starters/starters2.jpg" alt="Restaurant" width="600" height='auto'&gt;
      &lt;/a&gt;
        &lt;div class="desc"&gt;Cheese Bread&lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="img"&gt;
      &lt;a target="_blank" href="images/Starters/breadsticks.jpg"&gt;
        &lt;img src="images/Starters/breadsticks.jpg" alt="Restaurant" width="600" height='auto'&gt;
      &lt;/a&gt;
        &lt;div class="desc"&gt;Garlic Bread&lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="img"&gt;
      &lt;a target="_blank" href="images/Starters/mozzarellaSticks.jpg"&gt;
        &lt;img src="images/Starters/mozzarellaSticks.jpg" alt="Restaurant" width="600" height='auto'&gt;
      &lt;/a&gt;
        &lt;div class="desc"&gt;Mozzarella Sticks&lt;/div&gt;
    &lt;/div&gt;

    &lt;div class="img"&gt;
      &lt;a target="_blank" href="images/Starters/wings.jpg"&gt;
        &lt;img src="images/Starters/wings.jpg" alt="Restaurant" width="600" height='auto'&gt;
      &lt;/a&gt;
        &lt;div class="desc"&gt;Chicken Wings&lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;
</code></pre>