文字が次のページに写ってしまう

現在turn.jsを利用し、railsで本アプリを作成中です。
下記1枚目の画像の内容の「あああ...」が２枚の画像の内容に写ってしまいます。
(分かりづらいと思いますが、写ってしまってます。)
1枚１枚が独立して、次のページに写らないようにするには、どうすればいいのでしょうか？
おそらくcssで何かすればいいと思うんですが、どうすればいいか分かりません。
ご教授頂けましたら幸いです。

[home.html.erb]
<% if user_signed_in? %>
  <div id="flipbook_turn">
    <% @posts.each do |post| %>
      <div class="flipbook-image">
        <%= image_tag post.img.thumb.url %>
          <% if post.comments.any? %>
              <h2>内容</h2>
              <% post.comments.each do |comment|%>
              <p><%= comment.content %></p>
              <% end %>
          <% else %>
            空白
          <% end %>
      </div>
    <% end %>
  </div>
  <ol>
		<li>
			<span id="prevpage">前のページ</span>
		</li>
		<li>
			<span id="nextpage">次のページ</span>
		</li>
	</ol>			
  <script>
    $(function(){
      $('#flipbook_turn').turn(
          {
                  // 自動でページをめくったときの高さ
                  elevation: 10,
                  // ページめくりのスピード(ms)
                  duration: 1000,
                  // ページをめくるときの影->有効
                  gradients: true,
                  // 自動中央揃え->無効
                  autoCenter: false,
                  // 右開きか左開きかの設定->右開き
                  direction: 'rtl',
          }
      );
      $('#prevpage').click(function(){
          $('#flipbook_turn').turn('previous');
      });

      $('#nextpage').click(function(){
          $('#flipbook_turn').turn('next');
      });
    });
  </script>
  
<% else %>
  省略
<% end %>

[scss]
#flipbook_turn {
  width: 950px;
  height: 700px;
  margin: 3% 20%;
}
ol {
  text-align: center;
  list-style: none;
  width: 100%;
  margin-bottom: 20px;
}
ol li {
  width: 50%;
  float: left;
}
ol::after {
  content: "";
  display: black;
  clear: both;
}
#prevpage, #nextpage {
  cursor: pointer;
}