网格中的图像不堆叠

Question

我的图像具有以下代码：

<div id="gallery">
<div class="spacer">
  &nbsp;
</div>
<% @pictures.each do |picture|%>
  <div class="picture">
    <h3><%= picture.title %></h3>
    <%= image_tag picture.picture_url.to_s, :controls =>true, :width => '75%' %>
  </div>
<%end%>
<div class="spacer">
  &nbsp;
</div>

具有以下CSS：

.gallery {
  display: flex;
  flex-wrap: wrap;
  padding: 0 4px;
}

.picture {
  flex: 30%;
  max-width: 30%;
  padding: 0 4px;
  float: left;
}

.picture h3 {
  text-align: center;
}

.spacer {
  clear: both;
}

但是我的图像没有堆叠！

图片：images

我希望每个图像都堆叠在上一个图像的下面，但是如图所示，它们只是在开始新的一行。我对此感到困惑！我尝试添加

@media screen and (max-width: 600px) {
  .picture {
    flex: 100%;
    max-width: 100%;
  }
}

按照w3schools的指示

，但它没有执行任何操作。

任何帮助都会得到帮助！