Too much space on the right and the bottom - html

Question

I'm having problem where I have too much space on the right and bottom for my site, it's making scroll bars that let you scroll to far.
the problem with the scroll right is in the "grid_container_ci" div
and for bottom scrolling is the "grid_container_footer" div.
I have tried using margin's to get rid of it, but not successful. It seems like the problem came after I added the "grid_container_ci" div. but even now when I comment out my "grid_container_ci" div, I still have problem with "grid_container_footer".
<!-- Company Information --->
<div class="grid_container_ci">
<h3>Company Information</h3>
<p>Incorporated in 2004, Rapid Marine HVAC (Asia Pacific)
Pte Ltd<br>is one of Singapore’s largest Marine and Offshore
service providers<br>for HVAC, Refrigeration and Mechanical
Ventilation systems.</p>
<p>We have decades of unique expertise and experience
providing<br>comprehensive turnkey HVAC solutions to
a wide range of Offshore<br>and Marine applications and
also established an overseas network to<br>meet with the
stringent demands of this vast industry.</p>
<p>Our team of experienced engineers and operational staff
with in-depth<br>knowledge of the Rules & Regulations
of the standard classification<br>societies; Codes and
Standards, we are able to provide our customers<br>with
cost and time saving solutions meeting their budget and
according<br>to their requirements.</p>
<p>Today, Rapid Marine HVAC (Asia Pacific) Pte Ltd can
support clients<br>from project feasibility study through
actual execution safely, rapidly,<br>on time and within
budget. This execution of extensive and complex<br>projects
is now our core business.</p>
<p>We provide comprehensive turkey HVAC & Refrigeration,<br>
Heat Exchanger and Heat Transfer solutions to a wide range<br>
of Marine and offshore applications, including Tankers,<br>
Bulkers, Container Vessels, Accommodation barges,<br>
Multi-purpose Supply Vessels, FPSOs, Oilrigs, Platforms,<br>
Pipe Laying Barges and Offshore Accommodation<br>
modules.</p>
<img class="platform" src="Oil_platform_P-51_(Brazil).jpg" alt="picture">
</div>
<!-- Footer section --->
<footer>
<div class="grid_container_footer">
<div class="vision">
<h3>VISION</h3>
<p>Our vision is to be the worldwide leader<br>in HVAC&R services for the marine & offshore industry.</p>
</div>
<div class="mission">
<h3>MISSION</h3>
<p>Our mission is to understand our<br> customers needs and provide them<br>with cost effective and reliable HVAC&R<br>solutions using innovative technology<br>and methods which put us at the<br>forefront of our industry</p>
</div>
<div class="contact_us">
<h3>CONTACT US</h3>
<p>30 Gul Lane<br>Singapore 629424<br>T:[phone]<br>F:[phone]<br>E:enquiry#rapidoffshoremarine.com</p>
</div>
<div class="news">
<h3>NEWS</h3>
<p></p>
</div>
</div>
.grid_container_footer {
display: grid;
grid-template-columns: auto auto auto auto;
grid-template-rows: auto auto;
font-family: helvitica;
font-size: 13px;
color: white;
background-color: rgb(15,55,123);
margin-left: -7.7px;
padding-bottom: -200px;
width: 1519px;
}
.vision h3 {
position: relative;
left: 180px;
}
.vision p {
position: relative;
left: 75px;
}
.mission h3 {
position: relative;
left: 55px;
}
.contact_us h3 {
position: relative;
left: 2px;
}
.news h3 {
position: relative;
left: 70px;
}
.grid_container_ci {
position: relative;
font-family: helvitica;
color: rgb(15,55,126);
margin-bottom: -400px;
}
.grid_container_ci h3 {
border-bottom: 4px solid rgb(15,55,126)
}
.platform {
position: relative;
left: 650px;
bottom: 505px;
}

Answer 1

Try below CSS code. May this solve your problem.
.grid_container_footer {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: auto auto;
font-family: helvitica;
font-size: 13px;
color: white;
background-color: rgb(15,55,123);
margin-left: -7.7px;
padding: 20px;
}
.grid_container_ci {
font-family: helvitica;
color: rgb(15,55,126);
position: relative;
}
.grid_container_ci h3 {
border-bottom: 4px solid rgb(15,55,126)
}
.platform {
position: absolute;
top: 50px;
right: 20px;
}

Answer 2

The problem is your styling. Too much unneccesary paddings and margins. Check this updated one.
* {
box-sizing: border-box;
}
.grid_container_footer {
display: flex;
justify-content: space-around;
font-family: Helvetica;
font-size: 13px;
color: white;
background-color: rgb(15,55,123);
width: 100%;
padding: 20px 40px;
}
.grid_container_footer > div {
margin: 10px;
}
.vision h3 {
position: relative;
}
.vision p {
position: relative;
}
.mission h3 {
position: relative;
}
.contact_us h3 {
position: relative;
}
.news h3 {
position: relative;
}
.grid_container_ci {
position: relative;
font-family: helvitica;
color: rgb(15,55,126);
}
.grid_container_ci h3 {
border-bottom: 4px solid rgb(15,55,126)
}
.platform {
position: relative;
}
footer {
width: 100%;
position: relative;
bottom: 0;
}
<div class="grid_container_ci">
<h3>Company Information</h3>
<p>Incorporated in 2004, Rapid Marine HVAC (Asia Pacific)
Pte Ltd<br>is one of Singapore’s largest Marine and Offshore
service providers<br>for HVAC, Refrigeration and Mechanical
Ventilation systems.</p>
<p>We have decades of unique expertise and experience
providing<br>comprehensive turnkey HVAC solutions to
a wide range of Offshore<br>and Marine applications and
also established an overseas network to<br>meet with the
stringent demands of this vast industry.</p>
<p>Our team of experienced engineers and operational staff
with in-depth<br>knowledge of the Rules & Regulations
of the standard classification<br>societies; Codes and
Standards, we are able to provide our customers<br>with
cost and time saving solutions meeting their budget and
according<br>to their requirements.</p>
<p>Today, Rapid Marine HVAC (Asia Pacific) Pte Ltd can
support clients<br>from project feasibility study through
actual execution safely, rapidly,<br>on time and within
budget. This execution of extensive and complex<br>projects
is now our core business.</p>
<p>We provide comprehensive turkey HVAC & Refrigeration,<br>
Heat Exchanger and Heat Transfer solutions to a wide range<br>
of Marine and offshore applications, including Tankers,<br>
Bulkers, Container Vessels, Accommodation barges,<br>
Multi-purpose Supply Vessels, FPSOs, Oilrigs, Platforms,<br>
Pipe Laying Barges and Offshore Accommodation<br>
modules.</p>
<img class="platform" src="Oil_platform_P-51_(Brazil).jpg" alt="picture">
</div>
<!-- Footer section --->
<footer>
<div class="grid_container_footer">
<div class="vision">
<h3>VISION</h3>
<p>Our vision is to be the worldwide leader<br>in HVAC&R services for the marine & offshore industry.</p>
</div>
<div class="mission">
<h3>MISSION</h3>
<p>Our mission is to understand our<br> customers needs and provide them<br>with cost effective and reliable HVAC&R<br>solutions using innovative technology<br>and methods which put us at the<br>forefront of our industry</p>
</div>
<div class="contact_us">
<h3>CONTACT US</h3>
<p>30 Gul Lane<br>Singapore 629424<br>T:[phone]<br>F:[phone]<br>E:enquiry#rapidoffshoremarine.com</p>
</div>
<div class="news">
<h3>NEWS</h3>
<p></p>
</div>
</div>
and I updated the .grid_container_footer. I replaced the grid layout with flexbox which is more appropriate in this case.
.grid_container_footer {
display: flex;
font-family: Helvetica;
font-size: 13px;
color: white;
background-color: rgb(15,55,123);
width: 100%; // change from fixed size to percentage
padding: 20px 40px;
}

Answer 3

Thanks for all your input, I don't like just copying and pasting your code into mine as I need to learn how to alter my code to be correct, but based off of all your guys information there was something clearly wrong with my css, so I deleted my .grid_container_ci" css coding and commented out my html for it was well, was able to get the footer fixed when I did that. after I fixed the footer, I added back my html for the "grid_container_ci" and then started stlying again, I wasn't getting the results I wanted, and tried changing my html for the "grid_container_ci" into different divs for the text and image, then used "display-grid" in css to get the result I was looking for, and I got it. Below is my new code if anyone is curious. Thanks for the input!
<!-- Company Information --->
<div class="grid_container_ci">
<div class="ci">
<h3>Company Information</h3>
<p>Incorporated in 2004, Rapid Marine HVAC (Asia Pacific)
Pte Ltd<br>is one of Singapore’s largest Marine and Offshore
service providers<br>for HVAC, Refrigeration and Mechanical
Ventilation systems.</p>
<p>We have decades of unique expertise and experience
providing<br>comprehensive turnkey HVAC solutions to
a wide range of Offshore<br>and Marine applications and
also established an overseas network to<br>meet with the
stringent demands of this vast industry.</p>
<p>Our team of experienced engineers and operational staff
with in-depth<br>knowledge of the Rules & Regulations
of the standard classification<br>societies; Codes and
Standards, we are able to provide our customers<br>with
cost and time saving solutions meeting their budget and
according<br>to their requirements.</p>
<p>Today, Rapid Marine HVAC (Asia Pacific) Pte Ltd can
support clients<br>from project feasibility study through
actual execution safely, rapidly,<br>on time and within
budget. This execution of extensive and complex<br>projects
is now our core business.</p>
<p>We provide comprehensive turkey HVAC & Refrigeration,<br>
Heat Exchanger and Heat Transfer solutions to a wide range<br>
of Marine and offshore applications, including Tankers,<br>
Bulkers, Container Vessels, Accommodation barges,<br>
Multi-purpose Supply Vessels, FPSOs, Oilrigs, Platforms,<br>
Pipe Laying Barges and Offshore Accommodation<br>
modules.</p>
</div>
<div class="image">
<img class="platform" src="Oil_platform_P-51_(Brazil).jpg" alt="picture">
</div>
.grid_container_ci {
display: grid;
grid-template-columns: auto auto;
grid-template-rows: auto;
position: relative;
}
.grid_container_ci .image {
position: relative;
bottom: -60px;
}
.grid_container_ci .ci h3 {
border-bottom: 4px solid rgb(15,55,123);
}