Почему навигационная панель не занимает полную ширину?

Question

Я пытаюсь создать полную ширину Navbar с помощью начальной загрузки, но есть своего рода предел в моей нав

Как это:

Что я действительно пытаюсь сделать что-то вроде это

@import url(https://fonts.googleapis.com/css?family=Raleway:400,700,300,100); 
 
    body { 
 
     font-family: "Raleway", Sans-Serif; 
 
     font-weight: 400; 
 
    } 
 
    p { 
 
     text-align: justify; 
 
     font-size: 16px; 
 
    } 
 
    .navbar { 
 
     font-weight: 700; 
 
     letter-spacing: 2px; 
 
     text-transform: uppercase; 
 
    } 
 
    .navbar-default .navbar-nav .active a, 
 
    .navbar-default .navbar-nav .active a:focus, 
 
    .navbar-default .navbar-nav .active a:hover, 
 
    .navbar-default .navbar-nav li a:hover { 
 
     color: #e1b315; 
 
    } 
 
    .navbar .navbar-nav { 
 
     display: inline-block; 
 
     float: none; 
 
    } 
 
    .navbar-default .navbar-nav li { 
 
     margin: 0 15px; 
 
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/> 
 

 
<div class="row"> 
 
    <div class="col-md-12 text-center"> 
 
    <nav class="navbar navbar-default"> 
 
     <div class="container-fluid"> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home</a></li> 
 
      <li><a href="#">Features</a></li> 
 
      <li><a href="#">Contact Us</a></li> 
 
     </ul> 
 
     </div> 
 
    </nav> 
 
    </div> 
 
</div>

Answer 1

Решение

1. Не обернуть содержимое с .row или .container для полной ширины.
2. Вам необходимо сбросить bodymargin и padding.

Сниппет

@import url(https://fonts.googleapis.com/css?family=Raleway:400,700,300,100); 
 

 
body { 
 
    font-family: "Raleway", Sans-Serif; 
 
    font-weight: 400; 
 
    margin: 0; padding: 0; 
 
} 
 

 
p { 
 
    text-align: justify; 
 
    font-size: 16px; 
 
} 
 

 
.navbar { 
 
    font-weight: 700; 
 
    letter-spacing: 2px; 
 

 
    text-transform: uppercase; 
 
} 
 

 
.navbar-default .navbar-nav .active a, 
 
.navbar-default .navbar-nav .active a:focus, 
 
.navbar-default .navbar-nav .active a:hover, 
 
.navbar-default .navbar-nav li a:hover{ 
 
    color:#e1b315; 
 
} 
 

 
.navbar .navbar-nav { 
 
    display: inline-block; 
 
    float: none; 
 
} 
 

 
.navbar-default .navbar-nav li { 
 
    margin: 0 15px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<div class="text-center"> 
 
    <nav class="navbar navbar-default"> 
 
    <div class="container-fluid"> 
 
     <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Home</a></li> 
 
     <li><a href="#">Features</a></li> 
 
     <li><a href="#">Contact Us</a></li> 
 
     </ul> 
 
    </div> 
 
    </nav> 
 
</div>

Выход: http://output.jsbin.com/gicekasiri

Answer 2

Это не единственный способ, но он выполнит эту работу.

body { 
    font-family: "Raleway", Sans-Serif; 
    font-weight: 400; 
    margin: 0; 
} 

Просто добавьте margin: 0; к вашему телу CSS

Я сделал NavBar зеленый, так что легче увидеть.

@import url(https://fonts.googleapis.com/css?family=Raleway:400,700,300,100); 
 
    body { 
 
     font-family: "Raleway", Sans-Serif; 
 
     font-weight: 400; 
 
     margin: 0; 
 
    } 
 
    p { 
 
     text-align: justify; 
 
     font-size: 16px; 
 
    } 
 
    .navbar { 
 
     font-weight: 700; 
 
     letter-spacing: 2px; 
 
     text-transform: uppercase; 
 
     background-color: green; 
 
    } 
 
    .navbar-default .navbar-nav .active a, 
 
    .navbar-default .navbar-nav .active a:focus, 
 
    .navbar-default .navbar-nav .active a:hover, 
 
    .navbar-default .navbar-nav li a:hover { 
 
     color: #e1b315; 
 
    } 
 
    .navbar .navbar-nav { 
 
     display: inline-block; 
 
     float: none; 
 
    } 
 
    .navbar-default .navbar-nav li { 
 
     margin: 0 15px; 
 
    }

<div class="row"> 
 
    <div class="col-md-12 text-center"> 
 
    <nav class="navbar navbar-default"> 
 
     <div class="container-fluid"> 
 
     <ul class="nav navbar-nav"> 
 
      <li class="active"><a href="#">Home</a> 
 
      </li> 
 
      <li><a href="#">Features</a> 
 
      </li> 
 
      <li><a href="#">Contact Us</a> 
 
      </li> 
 
     </ul> 
 
     </div> 
 
    </nav> 
 
    </div> 
 
</div>