Mysterious Margin

Hi. I have a problem with footer. There is a mysterious margin appearing in the html element when showing on the website.
I have not write any margin-top command in the html code. Writing style="margin-top:0;" doesn't fix this issue.
It seems to always be overwrite by this mysterious "margin top=18px". Changing browser doesn't fix this.
Although, it disappears when the screen is md size.
I still don't think it is an responsive css issue because when I inspect it. It appears in the html element.

Here is my footer:

<footer id="footer" class="border-0" style="background-color: #ecf0f1;">

		<div class="container center" style="background-color: #ecf0f1;">
			<div class="footer-widgets-wrap">

				<div class="row mx-auto clearfix" >

					<div class="col-lg-4 col-md-6 col-sm-12">

						<div class="widget clearfix">
							<h4 style="color: #4e4c8f;">About us</h4>

							<h5></h5>								
						</div>

					</div>

					<div class="col-lg-4 d-md-none d-lg-block">

					</div>

					<div class="col-lg-4 col-md-6 col-sm-12">

						<div class="widget clearfix">
							<h4 style="color: #4e4c8f;">Contact</h4>

							<h6 class="lead" style="font-size: 1rem; line-height: 100%;">Email:
							<br>
							<br></h6>
						</div>

					</div>

				</div>

			</div>
		</div>

		<div id="copyrights" style="background-color:#54529a; padding-bottom: 2%;">
			<div class="container center clearfix dark" >
				<i class="icon-copyright1"></i>
			</div>
		</div>
		<div id="attribution" style="background-color:#54529a;" >
			<div class="container center clearfix dark">
				
		</div>
	</footer>

The inspect element is in the image.
Haven't buy hosting yet. So I don't have the live url now.
Thanks.