I am getting a white space above my image.
Here is the CSS part that I'm having trouble with:
h1 {
margin-top: 0;
}
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
}
.button_container {
max-width: 50%;
}
a {
text-decoration: none;
color: #ffffff;
}
a:hover {
color: #ffffff;
}
.wrapper {
margin: 0 auto;
max-width: 100%;
}
.container-fluid {
overflow: hidden;
margin: auto;
padding-left: 0;
padding-right: 0;
}
.button {
border: none;
outline: none;
border-radius: 25px;
padding: 1rem 3rem;
font-weight: 700;
color: #fff;
text-decoration: none;
}
img {
border-radius: 10rem;
margin-bottom: 10px;
margin-top: 0px;
-webkit-box-shadow: 0px 0px 57px 0px rgba(4, 6, 9, 0.25);
-moz-box-shadow: 0px 0px 57px 0px rgba(4, 6, 9, 0.25);
box-shadow: 0px 0px 57px 0px rgba(4, 6, 9, 0.25);
}
.button .button_highlight a:hover {
color: #60737c;
}
.button_highlight {
background: rgba(253, 80, 76, 1.0);
}
.button_wrapper a:hover {
color: #c9c9c9;
text-decoration: none;
}
.cf:after,
.cf:before {
content: " ";
display: table;
}
.cf:after {
clear: both;
}
#main {
background-image: url('.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
height: 100vh;
padding-bottom: 0;
margin-bottom: 0;
vertical-align: baseline;
}
#h1_blank {
margin: 0;
opacity: 0;
}
#h1_main {
margin-top: 250px;
text-align: center;
color: #ffffff;
font-size: 50px;
}
#main p {
font-size: 16px;
text-align: center;
color: #ffffff;
margin-left: 50px;
margin-right: 50px;
}
#h3_1 {
text-align: center;
color: #ffffff;
font-size: 16px;
}
.button_wrapper {
text-align: center;
margin: 3rem 0;
}
#services .service_p {
color: #414141;
margin: 0;
}
#services .service_p2 {
color: #777777;
margin-bottom: 10px;
}
#services {
background: #ffffff;
margin: 0;
position: relative;
}
#services .service {
background: #ffffff;
float: none;
padding: 3rem 2.5%;
padding-bottom: 0px;
text-align: center;
position: relative;
/*
-webkit-box-shadow: 0px 0px 57px 0px rgba(4, 6, 9, 0.25);
-moz-box-shadow: 0px 0px 57px 0px rgba(4, 6, 9, 0.25);
box-shadow: 0px 0px 57px 0px rgba(4, 6, 9, 0.25);
*/
border-radius: .5rem;
}
#services .service_2 {
background: #ffffff;
float: left;
padding: 3rem 2.5%;
padding-bottom: 0px;
text-align: center;
position: relative;
/*
-webkit-box-shadow: 0px 0px 57px 0px rgba(4, 6, 9, 0.25);
-moz-box-shadow: 0px 0px 57px 0px rgba(4, 6, 9, 0.25);
box-shadow: 0px 0px 57px 0px rgba(4, 6, 9, 0.25);
*/
border-radius: .5rem;
}
h2 {
margin-top: 0;
}
#headline_section {
text-align: center;
background-color: rgba(253, 80, 76, 1.0);
color: #fff;
}
#services h3 {
margin: 0;
margin-bottom: 2px;
font-size: 2.5rem;
color: #414141;
}
#services .button {
padding: .5rem 2rem;
}
#clients .client_p {
color: #414141;
margin: 0 0 0 0;
}
#clients {
background: #ffffff;
padding: 0 6.5rem 0;
position: relative;
}
#clients .client {
background: #ffffff;
margin: auto;
margin-bottom: 35px;
padding: 6rem 2.5%;
text-align: center;
position: relative;
-webkit-box-shadow: 0px 0px 57px 0px rgba(4, 6, 9, 0.25);
-moz-box-shadow: 0px 0px 57px 0px rgba(4, 6, 9, 0.25);
box-shadow: 0px 0px 57px 0px rgba(4, 6, 9, 0.25);
border-radius: .5rem;
}
#clients .button {
padding: .5rem 2rem;
}
#h3_cli {
text-align: center;
color: #414141;
margin-bottom: auto;
margin-bottom: 30px
}
#clients .source {
color: #606060;
margin: 0 0 2rem 0;
}
footer {
color: #ffffff;
background-color: rgba(253, 80, 76, 1.0);
margin: auto;
text-align: center;
}
#footer_h4 {
text-align: center;
margin: auto;
padding-top: 2rem;
padding-bottom: 2rem;
}
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<section id="main">
<h1 id="h1_blank"></h1>
<h1 id="h1_main">Offical Site</h1>
<p>Official home page of <br> Explore the group's social media, merch, and more!</p>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="button_wrapper">
<a href="socialmedia.html" class="button button_highlight">Social Media</a>
</div>
</div>
<div class="col-sm-12">
<div class="button_wrapper">
<a href="merch.html" class="button button_highlight">Merch</a>
</div>
</div>
<div class="col-sm-12">
<div class="button_wrapper">
<a href="#" class="button button_highlight" onclick="alert('This action is not yet supported on this site')">About Us</a>
</div>
</div>
</div>
</div>
</section>
<section id="services" class="cf">
<div class="container-fluid">
<h2 id="headline_section">About Us</h2>
<div class="row">
<div class="col-sm-4">
<div class="service">
<img src=".jpg" alt="" style="width:200px;height:200px;">
<h3></h3>
<p class="service_p">Test</p>
<p class="service_p2"><i>Test</i></p>
</div>
</div>
<div>
<div class="col-sm-4">
<div class="service">
<img src=".jpg" alt="" style="width:200px;height:200px;">
<h3></h3>
<p class="service_p">Test</p>
<p class="service_p2"><i>Test</i></p>
</div>
</div>
<div class="col-sm-4">
<div class="service">
<img src=".jpg" alt="" style="width:200px;height:200px;">
<h3></h3>
<p class="service_p">Test</p>
<p class="service_p2"><i>Test</i></p>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
<section id="clients" class="cf">
<div class="wrapper">
<div class="client">
<h3>Test</h3>
<p class="client_p">Test</p>
</div>
</div>
</section>
</body>
<footer>
<h4 id="footer_h4">Copyright © 2018</h4>
</footer>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
body{margin:0}– Temani Afif