I am currently working on a client's website and running into some issues with the layout of the booking page. The address is supposed to be on the left side, the contact form on the right, and both should be contained within a white box that fills the webpage.
Unfortunately, the DIV box is aligning to the left, causing the contact form and address to be squashed together. I need some guidance on how to resolve this issue. You can view the webpage here.
.box {
background-color: white; /* for visualization purposes */
display: inline-block;
max-width: 100%;
}
.box2 {
display: inline-block;
padding: 20px 20px;
max-width: 100%;
}<div class="content">
<div class="wrap">
<div class="contact">
<h1>Book an Appointment Online or via Telephone/Email:</h1>
<div class="section group contact1">
<div class="col span_1_of_3">
<div class="company_address">
<h3>Company Information:</h3>
<p>BY APPOINTMENT ONLY</p>
<p>Imani Skin Clinic,</p>
<p>8-10 Sneyd Street</p>
<p>Cobridge</p>
<p>ST6 2NZ</p>
<p>United Kingdom</p>
<p>Phone:+447305585588</p>
<p>Email: <span><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1d74737b725d74707c73746e7674737e717473747e337e7270">[email protected]</a></span></p>
<br />
<br />
<div id="share-buttons">
<!-- Twitter -->
<a href="https://twitter.com/imaniskinclinic" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
</a>
<!-- Facebook -->
<a href="http://www.facebook.com/imaniskinclinic" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
</a>
<!-- Instagram -->
<a href="http://www.instagram.com/imaniskinclinic" target="_blank">
<img src="images/insta.jpg" alt="Instagram" />
</a>
</div>
<br />
<br />
</div>
<div id="contact"><a class="shedul-embed-button-link" style="overflow: visible; cursor: pointer; background: rgb(248,171,190); color: rgb(255, 255, 255); border: 0px; display: inline-block; outline: none; padding: 10px 15px; margin: 0px; font-family: Roboto, sans-serif; font-size: 16px; line-height: 16px; text-decoration: none; border-radius: 3px; -webkit-appearance: none; box-shadow: none;" href="https://www.fresha.com/providers/imani-skin-clinic-ltd-cgfhlxsq">Book Now</a><script>!function(e){var t="shedul-embed-button-loader",d="https:"===e.location.protocol?"https":"http",n=e.getElementsByTagName("head")[0];if(!e.getElementById(t)){var o=e.createElement("script"),p=e.createElement("style");o.id=t,o.src="https://app.shedul.com/embed_button.js".replace(/^\w+/,d),p.type="text/css",p.innerHTML=".shedul-widget-open { position: fixed; overflow:hidden; }",n.appendChild(o),n.appendChild(p)}}(document);</script></div>
</div>
<div class="col span_3_of_3">
<div class="contact-form">
<div id="zbwid-fbedad33"></div>
</div>
</div>