North Theme: Can’t align content correctly in WooCommerce product page

Hello!

I’m using WordPress and SiteOrigin (plugin) and it’s North theme to create a t-shirt printing website and have a particular issue with aligning a few sections of a product in the product page.

Here is the link to the particular page:

http://7dollarprintedtshirts.com/product/custom-t-shirts-for-kids-and-adults/

Basically, I want the designer to be on the left with the product info on the right and the product details on the bottom.

I’ve revised the CSS with the following code so the page is full width:

body.responsive .container {
width: 100%;
max-width: 1500px;
}

Please see attached screenshot

http://7dollarprintedtshirts.com/wp-content/uploads/2017/04/aligned-but-not-just-right.png

The content seems to be aligned correctly using the following code:

.woocommerce.single #content div.product div.entry-summary {
margin-top: 0;
width: 54%;
float: left;
padding-left: 50px;
}

but when I resize my window so I can see if everything aligns correctly, it doesn’t. :(

At one point, the product info on the right moves to the below the designer which is what I want but now it’s too close to the bottom edge of the designer,

Please see attached screenshot:

http://7dollarprintedtshirts.com/wp-content/uploads/2017/04/product-info-too-close-to-bottom-of-designer.png

but when I resize the screen even smaller, the product info seems to squeeze to the right of the designer section.

Please see attached screenshot:

http://7dollarprintedtshirts.com/wp-content/uploads/2017/04/almost-aligned-correctly.png

I tried revising the CSS but it doesn’t seem to end up the way I want.

What can I do so each part of the page

• Designer
• Product info
• Product details

Is spaced and aligned correctly and no matter what size the window is, everything will be spaced and aligned so it looks sectioned correctly?

Any help would be very appreciated!