添加Bootstrap CSS文件时，为什么徽标和Navbar会向左浮动

Question

所以我将Bootstrap的当前CDN文件添加到我的代码中但是当我这样做时，主导航栏变得非常棘手。 这是HTML的样子：

 <header>
   <div class="row">
   <div class="logo">
    <img src="img/whitestag.jpg">
   </div>
   <ul class="main-nav">
    <li class "active"><a href="">Home</a></li>
      <li><a href="">About</a></li>
    <li><a href="">Services</a></li>
    <li><a href="">Story</a></li>
    <li><a href="">Work</a></li>
   <li><a href="">Blog</a></li>
    <li><a href="">Contact</a></li>
  </ul>
  </div>
  <div class="hero">
  <h1>Professional Full Stack Developer</h1>
  <div class="button">
  <a href="" class="btn btn-half">What Can I Do?</a>
    <a href="" class="btn btn-full">Completed Projects</a>
  </div>
  </div>

  </header>

这是CSS目前所说的内容：

.main-nav{
  float:right;
  list-style:none;
  margin-top:55px;
  margin-right:30px;

  }
 .main-nav li{
  display: inline-block;
  margin-left:30px;
  }
 .main-nav li a{
  color:white;
  text-decoration:none;
  font-size:90%;
  font-width:bold;
  }
  .main-nav li a:hover{
  color:#e67e22;
  border-bottom:2px #e67e22;
  transition:all 0.5s ease-in;
  padding:20px 0;
  }
  .logo img{
  height:70px;
  float:right;
  margin-top:30px;
  border-radius:12px;
   }

但最终结果仍然如下：enter image description here

任何帮助都会很棒！完全是新的。