So I'm kinda new to HTML and CSS, So probably there is a really obvious answer for my question. My problem is that the right padding of my Social Media icons are not working. They're inside a div and is **floated to the left** (default by Bootstrap).

```css
.fa {
  font-size: 30px;
  width: 50px;
  text-align: center;
  text-decoration: none;
  padding: 20px;
  border-radius: 100%
}

.fa:hover {
  opacity: 0.7;
}

.content2 {
  text-align: center;
}

/* Facebook */

.fa-facebook {
  background: #3B5998;
  color: white;
}

/* Twitter */

.fa-twitter {
  background: #55ACEE;
  color: white;
}

/*Google*/

.fa-google {
  background: #dd4b39;
  color: white;
}

/*Instagram*/

.fa-instagram {
  background: #125688;
  color: white;
}
```

```html
<h2>Or Alternatively, You can Contact Us Via Our Social Media Shown Below.</h2>
<div class="col-md-4 col-md-offset-4">
  <a href="#" class="fa fa-facebook"></a>
  <a href="#" class="fa fa-twitter"></a>
  <a href="#" class="fa fa-instagram"></a>
  <a href="#" class="fa fa-google"></a>
</div>
</div>
</div>
```

Additional Information:

Using Bootstrap 3.3.7 and Font Awesome 4.7.0 CSS

[It's Supposed to be a Circle](https://i.stack.imgur.com/WaQKz.png)