CODEWITHSUNDEEP
htmlcssbootstrap-4
Benjamin45
Benjamin45

Reputation: 52

Boostrap 4 row fix horizontal overfow

I have this problem where when i am making a row at the right side of the page a white space apears. I was wondering why this is happening and how i can remove this. I've tried multiple things but without any succes. 

.special-header {
  margin-top: 50px;
}

.special-h1 {
  font-size: 40px;
  font-weight: 700;
  font-style: normal;
  color: #6BC8F2;
  line-height: 49px;
}

.special-row {
  margin-top: 120px;
}

.special-h2 {
  text-align: center;
}

.special-block {
  border: 2px solid #6BC8F2;
  margin-left: 160px;
  margin-right: 160px;
  border-radius: 5px;
  padding: 30px;
}

.special-icon {
  float: right;
}

.special-i {
  font-size: 39px;
  color: #6BC8F2;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<article class="special-header">
  <div class="text-center container">
    <h1 class="special-h1">Onze specialiteiten</h1>
  </div>
  <div class="special-row row d-flex justify-content-center">
    <div class="col-12 col-md-2 col-lg-2 special-block">
      <h2 class="special-h2">Maatwerk</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae dui maximus, ullamcorper dolor vel, ultriceserat. Suspendisse sollicitudin odio ac ex rutrum, non vulputate risus posuere <br><a href="#">Meer…</a></p>
      <div class="special-icon">
        <i class="fas fa-heartbeat special-i"></i>
      </div>
    </div>
    <div class="col-12 col-md-2 col-lg-2 special-block">
      <h2 class="special-h2">Maatwerk</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae dui maximus, ullamcorper dolor vel, ultriceserat. Suspendisse sollicitudin odio ac ex rutrum, non vulputate risus posuere <br><a href="#">Meer…</a></p>
      <div class="special-icon">
        <i class="fas fa-heartbeat special-i"></i>
      </div>
    </div>
    <div class="col-12 col-md-2 col-lg-2 special-block">
      <h2 class="special-h2">Maatwerk</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam vitae dui maximus, ullamcorper dolor vel, ultriceserat. Suspendisse sollicitudin odio ac ex rutrum, non vulputate risus posuere <br><a href="#">Meer…</a></p>
      <div class="special-icon">
        <i class="fas fa-heartbeat special-i"></i>
      </div>
    </div>
  </div>
</article>

Screenshot Below I've posted my HTML and css and a image of how its curently looking!

Upvotes: 0

Views: 32

Answers (1)

Ziad Darwich
Ziad Darwich

Reputation: 397

wrap your first row with a div with container or container-fluid class

Upvotes: 1

Related Questions