Bootstrap扭曲Border-Radius图标/图像

Question

所以我正在为客户开发一个项目并遇到了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><a href="//twitch.tv/<?php echo $twitch_username; ?>" target="_blank" title="Twitch"><i class="fa fa-twitch"></i></a></li>

这是在添加bootstrap以使其在移动设备上更具响应性之后，在这之后这就是顶部现在的样子;

这是我删除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><a href="//twitch.tv/<?php echo $twitch_username; ?>" target="_blank" title="Twitch"><i class="fa fa-twitch"></i></a></li>

这是我的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;
}