Thanks for the details, I can login your website, I assume we are talking about the problem product post:
hidden link
Q1) I want all my contents to fit into the contents are in the middle.
You can simply use the default CSS style from your theme files, for example:
edit the content template:
hidden link
wrap all codes into HTML codes:
<div class="container_inner default_template_holder clearfix page_container_inner"><div class="vc_row wpb_row section vc_row-fluid ">
...
</div></div>
Q2) the option box does not appear with the code you give me. And I don't know how you put in blue/green as options.
Please check the test site, it is a Variable product:
hidden link
in section "Product Data", click "Variations"
More help:
hidden link
Q3) where do you put in contents for product description
Same as above test site:
hidden link
see section "Product Short Description"
Q4) I want product details and below to be at full width and the titles in center
You can add CSS class from your theme file, for example the CSS class "clearfix", like this:
...
<div class="product-details clearfix">
<h5>product details:</h5>
[wpv-post-body view_template='None' suppress_filters='true']
</div>
...
Q5) the product details section will be the longest and will have lots of contents including pictures.
Yes, it is possible, you just need to put them into the post content box, see the the product post in admin side:
hidden link
string "Product details here ..."
Q6) . the product reviews and product q&a will each have a table and I am planning to put them in using a plugin I am using.
That depends on yourself.
And there is build-in float left and right CSS class in your theme files, for example:
hidden link
I replace the CSS class name "my-left" with "images", like this:
<div class="images">
<div class="product-image">
<h5>Product image:</h5>
[wpv-woo-product-image size="shop_single" output="" gallery_on_listings="no"]
</div>
replace the CSS class name "my-right" with "summary entry-summary", like this:
<div class="summary entry-summary">
...
</div>
As I can see, there is a problem in your website, the shortcode [wpv-post-excerpt] does not return the post excerpt content, but return the post body content, it is abnormal, which I can not duplicate same problem, see the test site:
hidden link
I suggest you contact your theme author for it.
Since almost of all your question is custom CSS codes problem, and woocommerce problem, I suggest you read some document as I mentioned above.
If you have new questions, please create new thread for it. this will help other user to find the answers, thanks