Solved Problem with Woocommerce checkout page layout

Hi there, the layout of my "Your order" displays the "direct bank transfer" option next to the totals table, which squishes the table content. Is there code that can fix this?

and

The "Additional information" heading doesn't have any top padding. It is squished up against the email address text box.

Can you please help? Thank you very much.

https://oceanstechnology.co.uk/checkout/

 

Oh right, sorry about that. Here you go:
https://oceanstechnology.co.uk/process-payment/port-maintenance-and-operations/

 

Thanks a lot, that solved the main issues, but now it's reporting a bug. It might have something to do with some of the other custom CSS I found online and added to my site. I have copied all the code in my custom CSS below. I really appreciate you helping me with this. I have no coding experience...

@media screen and (min-width: 980px) {
.checkout-button {
width: 100% !important;
float: right !important;
/***** Checkout Button, style how you would like *****/
color:#384f60!important;
font-weight:bolder!important
}
.woocommerce-page.et_pb_button_helper_class button.button {
/***** Checkout Button, style how you would like *****/
color:#384f60 !important;
font-weight:bolder!important
}
.cart_totals {
float: right !important;
width: 32% !important;
border: solid 2px #f2f2f2;
border-radius: 3px !important
margin-bottom: 0px;
padding-bottom: 0px;
}
.woocommerce-cart .wc-proceed-to-checkout {
padding: 1em 0 0 0;
}
.woocommerce-page.et_pb_button_helper_class a.button {
margin-bottom: 0px !important;
}
.woocommerce table.shop_table {
float: left !important;
width: 63% !important;
}
.woocommerce-page table.cart td.actions .coupon {
float: left;
width: 100%;
}
.woocommerce-page.et_pb_button_helper_class button.button, .woocommerce button.button:disabled, .woocommerce button.button:disabled[disabled] {
width: 60%;
margin-bottom: 10px;
}
/***** Heading, change according to taste ***/
.cart_totals h2, .shipping_calculator h2 {
background-color: #384f60 !important;
color: #FFF !important;
padding: 20px !important;
text-align: center !important;
font-size: 25px !important;
font-weight: lighter !important
border-radius: 3px !important;
margin-bottom: 30px !important;
}
}
@media (min-width: 768px){
#customer_details{
width: 60%;
float: left;
}
#order_review_heading{
width: 30%;
float: left;
padding-left: 50px;
}
#order_review{
width: 40%;
float: left;
padding-left: 50px;
padding-top: 15px
}
.woocommerce table.shop_table td{
width: 50%;
}
.woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1,
.woocommerce .col2-set .col-2, .woocommerce-page .col2-set .col-2{
width: 100%;
}
}
#page-container .woocommerce table.shop_table {
width: 100%!important;
float: none!important;
}
.woocommerce-additional-fields {
margin-top: 35px;
}

 

Thank you for your kind assistance. Your code solved my first two formatting issues. But I now have additional issues:

1. On the cart page (https://oceanstechnology.co.uk/confirm-selection/) the column distribution allows a lot of space for the image which is very small, and very little space for product, price, quantity and subtotal. I would prefer a more sensible column distribution, allowing the most space for the product name.

2. Still on the cart page (https://oceanstechnology.co.uk/confirm-selection/) in the cart totals table, the amounts are aligned in the middle of the table. I would prefer to have them right aligned.

3. On the checkout page (https://oceanstechnology.co.uk/checkout/) I have the same issue as above - in the order review table the amounts are aligned in the middle of the table. I would prefer to have them right aligned.

Thank you SO much for your willingness to help me!

 

You are amazing. Thank you so very much