Bootstrap distorting the Border-Radius icon/image - php

Question

So Im working on a project for a client and ran into an issue with Border-Radius + Bootstrap,
<div class="header">
<div class="top-nav">
<div class="container">
<div class="row">
<img class="logo" src="<?php if($custom_logo){echo $custom_logo; }else{echo $avatar;} ?>">
<nav class="social-media-top">
<h1 class="col-xs-12">Hello, I am <span><?php echo $twitch_username; ?></span></h1>
<?php if($twitch_username){ ?>
<li><i class="fa fa-twitch"></i></li>
This is after adding bootstrap to make it more responsive on mobile, well after doing that this is what the top now looks like;
This is what it looks like when I remove the Bootstrap code;
This is the code with out bootstrap on the image
<div class="header">
<div class="top-nav">
<div class="container">
<div class="row">
<img class="logo" src="<?php if($custom_logo){echo $custom_logo; }else{echo $avatar;} ?>">
<nav class="social-media-top">
<h1 class="col-xs-12">Hello, I am <span><?php echo $twitch_username; ?></span></h1>
<?php if($twitch_username){ ?>
<li><i class="fa fa-twitch"></i></li>
This is my css
/* Top Header */
.header {
padding-top: 1.5em;
border-top: solid .3em rgba(46, 204, 113, 1.0);
}
.top-nav {
margin-top: 1.2em;
margin-right: auto;
margin-bottom: .8em;
margin-left: auto;
width: 30em;
}
.logo {
float: left;
width: 5em;
height: 5em;
border: solid .1em rgba(46, 204, 113, 1.0);
border-radius: 50%;
}
.social-media-top {
float: right;
padding-bottom: 1em;
}
.social-media-top h1 {
margin: 0;
padding: 0;
color: #41eb71;
font-weight: 100;
font-size: 2em;
align-content: center;
}
.social-media-top h1 span {
color: #41eb71;
text-transform: capitalize;
font-weight: 600;
}
.social-media-top li {
display: inline-block;
}
.social-media-top li i {
display: inline-block;
width: 2em;
height: 2em;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background-color: rgba(46, 204, 113, 1.0);
color: white;
text-align: center;
line-height: 2em;
}