How to solve EPUB3/EPUB2 rendering issue on Ipad

[E-Books]

Please refer the attachment.

I have created a sample EPUB3 ebook in which box content not displayed properly and box displayed as two separate boxes on Ipad.

Kindly guide me how to solve this issue. Is this a bug of Ipad?
Note: Same issue occur on portrait mode.

Codes used:

HTML
-----
<p class="image1"><img src="../images/p29.jpg" alt=""/></p>
<p class="h2c">Being back ... childhood. </p>

CSS
----
.image1
{
font-size: 100%;
margin-top: 1em;
margin-bottom: 2em;
margin-left: 0em;
margin-right: 0em;
text-align: center;
text-indent: 0em;
}

.h2c
{
margin-top: 1em;
margin-bottom: 0.5em;
margin-left: 3em;
margin-right: 0em;
text-align: left;
width:350px;
text-indent: 0em;
font-family:sans-serif;
background-color: #FFDF00;
border-top-right-radius:1em;
padding:0.5em;
display:block;
}

Regards,
E-Books lover

[Jellby]

"display: block" does not mean it won't break across pages, and it's the default for <p> anyway. You are looking for "page-break-inside: avoid", but I have no idea if iBooks (I guess you mean iBooks, rather than iPad) supports it.

[E-Books]

Thanks for the suggestion, iBooks supports "page-break-inside: avoid" CSS property and rendered well.