urbannerd

That worked perfectly, thank you!

I dont know how I could forget something so basic.
Sorry, here it is.

mariodidit.com

Here it is on codepen https://codepen.io/anon/pen/YypXjw

Tried adding fixed height to the main div but still no results.

Ive tried that and they all go missing when I change them to auto.

Ok made some changes and now they display evenly, but for some reason it no longer loads the .back image and just flips the front image.

.threeflips {
  width: 100%;
}

.flip-container {
  -webkit-perspective: 1000;
  -moz-perspective: 1000;
  -o-perspective: 1000;
  perspective: 1000;
width: 30%;
float: left;
}

.flip-container:hover .flipper,
  .flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
transform: rotateY(180deg);
}

.flip-container, .front, .back {
width: 400px;
height: 400px;
}

.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;

-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;

  -o-transition: 0.6s;
-o-transform-style: preserve-3d;

transition: 0.6s;
transform-style: preserve-3d;

position: relative;
}

.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
  -o-backface-visibility: hidden;
backface-visibility: hidden;

position: absolute;
top: 0;
left: 0;
}

.front {
background: url(https://www.3peaks.us/wp-content/uploads/2015/09/1front.jpg) 0 0 no-repeat;
background-size: 100% 100%;
z-index: 2;
}

.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
transform: rotateY(180deg);

background: url(https://www.3peaks.us/wp-content/uploads/2015/09/1back.jpg) 0 0 no-repeat;
background-size: 100% 100%;
}

Sorry, had maintenance mode on but I just removed it.

Nevermind, I figured it out, had to copy the sidebar.php file and add it where the sidebar area ends.

Heres the page.php code

<?php
if ( !defined('ABSPATH')) exit; // Exit if accessed directly
/**
 * Standard page output (Default template)
 *
 * This is the template that displays all pages by default.
 * Please note that this is the WordPress construct of pages
 * and that other 'pages' on your WordPress site will use a
 * different template.
 *
 * @package WordPress
 * @subpackage Weaver II
 * @since Weaver II 1.0
 *
 *  	>>>> DO NOT EDIT THIS FILE <<<<
 *
 * Warning! DO NOT EDIT THIS FILE, or any other theme file! If you edit ANY theme
 * file, all your changes will be LOST when you update the theme to a newer version.
 * Instead, if you need to change theme functionality, CREATE A CHILD THEME!
 *
 *	>>>> DO NOT EDIT THIS FILE <<<<
 */

weaverii_get_header('page');
if (weaverii_getopt('wii_infobar_location') == 'top') get_template_part('infobar');
weaverii_inject_area('premain');
echo("\t<div id=\"main\">\n");
weaverii_trace_template(__FILE__);
weaverii_get_sidebar_left('page');
?>
		<div id="container_wrap"<?php weaverii_get_page_class('page', 'container-page'); ?>>
<?php
        if (weaverii_getopt('wii_infobar_location') == 'content')
            get_template_part('infobar');
		weaverii_inject_area('precontent'); ?>
		<div id="container">
<?php		weaverii_get_sidebar_top('page'); ?>

			<div id="content" role="main">
<?php
            while ( have_posts() ) {
				weaverii_post_count_clear(); the_post();

				get_template_part( 'content', 'page' );

				comments_template( '', true );
			}
?>

			</div><!-- #content -->
<?php		weaverii_get_sidebar_bottom('page'); ?>

		</div><!-- #container -->
		</div><!-- #container_wrap -->

<?php	weaverii_get_sidebar_right('page'); ?>
<?php   weaverii_get_footer('page');
?>

just so the solution is archived on here for anyone else who
encounters this problem….

I had to go to the woocommerce template files
and in the archive-product.php file I added the basic image html
from the first post in this section

<?php
		/**
		 * woocommerce_before_main_content hook
		 *
		 * @hooked woocommerce_output_content_wrapper - 10 (outputs opening divs for the content)
		 * @hooked woocommerce_breadcrumb - 20
		 */
		do_action('woocommerce_before_main_content');
	?>
<img src='https://thepreciselife.com/wp-content/uploads/2013/IMG_2793cropped.jpg'>
		<?php if ( apply_filters( 'woocommerce_show_page_title', true ) ) : ?>

			<h1 class="page-title"><?php woocommerce_page_title(); ?></h1>

I may have posted this in the wrong section,
can someone move this to the plugins page or
do i need to repost?

yes! it works. ??

is there any way to give you rep, points, feedback, anything?! lol

youve helped me on here a few times and i appreciate it sooo much. haha

it worked to make it wider,
but everything still sits all the way to the left,
no normal padding areas.

for example that banner on the home page that says
live life with prcsion used to just sit in the middle
by itself?

so if you look at the two photos in the OP
you dont see that now the content area is a little wider than the PRCSION logo up top, and now the logo is wider than the content area.

and do you not notice that the title like on the contact page
is right up against the left of the content area?

i tried to clear my cache too

Oh man sorry. idk how i forgot that lol

PRCSION