nested wrappers issue

[ghost]

Hi

        <article id="twoway">
            <section class="wrapper">
                <h3>A two-way split</h3>
                <p class="wrapper" style="width=50%;float:left;">
                    These two blocks of text will float side by side with some empty columns on the sides on large screens. On medium-sized screens the empty columns will disappear, and on small screens the blocks will be stacked vertically.
                </p>
                <p class="wrapper" style="width=50%;float:left;">
                    These two blocks of text will float side by side with some empty columns on the sides on large screens. On medium-sized screens the empty columns will disappear, and on small screens the blocks will be stacked vertically.
                </p>
            </section>
            <section class="wrapper">
                <h3>By the way</h3>
                <p>
                    If you're viewing this page on an iOS device, it might zoom in wonkily when you rotate your device. This is because of <a href="http://filamentgroup.com/examples/iosScaleBug/">a Mobile Safari bug</a>.
                </p>
            </section>
        </article>

the left and right margins of the floated paragraphs should somehow merge with the parent margins, shouldn't they?