Woocommerce buttons, grey area at bottom and filling entire screen - css

Question

I have a number of issues with my woocommerce pages in my wordpress site that I am hoping someone could help me with. They have been driving me crazy trying to fix.
My theme - Trias - http://www.mojo-themes.com/item/trias-multi-style-corporate-responsive-theme/ does not support woocommerce and this has creatd issues.
First one is the woocommerce pages - category and product fill the entire screen i.e. right to the edge. Any idea how I would change this to be in line with my theme?
At the bottom of these woocommerce category and product pages - the theme ends and you can see grey area beneath the theme area - any ideas on how to prevent this.
Final query and this one is the most annoying - the theme has a floating icon on buttons i.e. a floating small arrow on the left of the arrow before the words start. Problem is on the woocommerce pages - the floating arrow floats above the words on the button. It is super annoying.
My themes button is as:
button,
a.button {
display: inline-block;
position: relative;
margin-top: 30px;
border: 0 none;
/* background: #00a3da url("images/button-link-arrow.png") no-repeat 0 50%;*/
padding: 7px 12px 7px 35px;
text-transform: uppercase;
color: #fff;
font-family: "Oswald";
font-size: 16px;
line-height: 20px;
cursor: pointer;
Please see image of the button with floating arrow: image of button with incorrect floating arrow
Thank you very much in advance for any suggestions at all

Answer 1

— U P D A T E D —
Add this CSS rules to the style.php file of your active child theme or theme
For your icon buttons :
.button.product_type_variable.add_to_cart_button,
.single_add_to_cart_button.button,
button.single_add_to_cart_button,
.button.wc-forward {
padding-left: 34px !important;
}
.button.product_type_variable.add_to_cart_button:before,
.single_add_to_cart_button.button:before,
button.single_add_to_cart_button:before,
.button.wc-forward:before {
top: 6px !important;
}
For your content (only woocommerce pages):
.woocommerce .content-wrap {
width: 934px;
margin: 0 auto;
padding: 20px 30px 20px 36px;
}
You will have to add custom media queries and adapt the values of this rules depending on target screen resolutions.
I think that you haven't set correctly your pages (regarding your theme), that's why you have this kind of "content" problems on woocommerce pages:
The best way to solve this kind of issue is to contact author's theme support threads, opening a ticket.