Removing the whitespace between sections

JjazzyflashMar 9, 2021

I'm trying to remove the whitespace between two sections in the html page, making one section directly above the second section with no whitespace between them. Example: below is the code of a subscribe to News section appearing above the Footer section.I want them to be on top of the other with no space between them.I can't get rid of the whitespace...

First section`==========<div id="NEWS" class="full dark" style="display:block; background-color:#4fbee0 !important; max-width:100%; height:auto; background-size: cover; border-bottom: none !important ;">
<div class="container">
<div class="row ">
<div class="col">
<h2 style="padding-top:30px">Subscribe to News</h2></div></div></div></div>

Second section======== <div id="wrapper" class="clearfix">

	&lt;footer id="footer" class="dark " style="background-color:#315B6F; margin-top: 0px; padding-top: -20px; width:100%; background-size: cover; border: none !important;"&gt;

		&lt;div class="container-fluid"&gt; &lt;/div&gt;
			&lt;!-- Footer Widgets
			============================================= --&gt;
			&lt;div class="footer-widgets-wrap"&gt;

		&lt;div class="container-fluid"&gt;
		&lt;div class="row text-smaller"  style="padding-left:7%;"&gt;
			&lt;div class="col-sm-6 col-md-3 col-lg-2"&gt;
			&lt;ul style="list-style-type:none;"&gt;
					&lt;li&gt;&lt;a class="text-larger" href="#" style="font-size:1.1em;font-weight:900;"&gt;Markets&lt;/font&gt;&lt;/a&gt;&lt;/li&gt;
					&lt;div class="clearfix"&gt;		&lt;li&gt;&lt;a href="#"&gt;Commercial & Institutional&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Data Centers&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;e-Commerce&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Housing&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Industrial & Manufacturing&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Power&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Transportation&lt;/a&gt;&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/div&gt;

			&lt;div class="col-sm-6 col-md-3 col-lg-2"&gt;
			&lt;ul style="list-style-type:none;"&gt;
					&lt;li&gt;&lt;a class="text-heading" href="#" style="font-size:1.1em;"&gt;Capabilities&lt;/a&gt;&lt;/font&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Custom Power Solutions&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Electrical&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Industrial Services&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Mechanical&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Technology Infrastructure&lt;/a&gt;&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/div&gt;

			&lt;div class="col-sm-6 col-md-3 col-lg-2"&gt;

			&lt;ul style="list-style-type:none;"&gt;
					&lt;li&gt;&lt;a class="text-heading" class="text-heading"  href="#" style="font-size:1.1em;"&gt;About&lt;/a&gt;&lt;/font&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Our Story&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Our Business Units&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Leadership&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Board of Directors&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Corporate Leadership&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Operating Executives&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Corporate Policy&lt;/a&gt;&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/div&gt;
			&lt;div class="col-sm-6 col-md-3 col-lg-2"&gt;
			&lt;ul style="list-style-type:none;"&gt;
					&lt;li&gt;&lt;a class="text-heading"  href="#" style="font-size:1.1em;"&gt;Investors&lt;/a&gt;&lt;/font&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Stock Information&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;SEC Filings&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Presentations&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Corporate Governance&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Financial Information&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Financial Reports&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Shareholder Information&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Investor FAQs&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Press Releases&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Information Request&lt;/a&gt;&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/div&gt;

			&lt;div class="col-sm-6 col-md-3 col-lg-2"&gt;
			&lt;ul style="list-style-type:none;"&gt;
					&lt;li&gt;&lt;a  class="text-heading" href="#" style="font-size:1.1em;"&gt;Corporate Responsibility&lt;/a&gt;&lt;/font&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Safety&lt;/a&gt;&lt;/li&gt;					
					&lt;li&gt;&lt;a href="#"&gt;Environmental&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Social&lt;/a&gt;&lt;/li&gt;
					&lt;li&gt;&lt;a href="#"&gt;Governance&lt;/a&gt;&lt;/li&gt;
				&lt;/ul&gt;
			&lt;/div&gt;

			&lt;div class="col-sm-6 col-md-3 col-lg-2"&gt;
			&lt;ul style="list-style-type:none;"&gt;
					&lt;li&gt;&lt;a class="text-heading" href="#" &gt;Careers&lt;/a&lt;/li&gt;
                    &lt;li&gt; &lt;/li&gt;
					&lt;li&gt;&lt;a  class="text-heading" href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt; &lt;/li&gt;

					&lt;li&gt;&lt;a class="text-heading" href="#"&gt;Corporate Office&lt;/a&gt;&lt;/li&gt;
					
				
					
				&lt;/ul&gt;
			&lt;/div&gt;
&lt;/div&gt;

</footer> ```````

SSemicolon WebSTAFFMar 10, 2021

Hello,

You can simply consider using the Spacing Classes (Margin/Padding): https://getbootstrap.com/docs/4.5/utilities/spacing/ on the Section or any Element to remove their margins or paddings.

Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.