Почему плывет кнопка в navbar?

Question

[Алексей Ярков]

В навбаре плывет кнопка при уменьшении экрана (собственно она и нужна для этого).
Скрин:

Код:

<nav class="navbar navbar-static-top navbar-inverse" role="navigation">
				
					<div class="navbar-header">
						<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbarCollapse">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
						<a class="navbar-brand" href="#">Chat Example</a>
					</div>
					<!--nav-collapse -->
					<div id="navbarCollapse" class="navbar-collapse collapse">
						<ul class="nav navbar-nav">
							<li><a target="_blank" href="https://github.com/yarkovaleksei/AppChat">View on GitHub</a></li>
						</ul>
					</div>
					<!--/.nav-collapse -->
				
			</nav>

Answer 1

[display: block]

Плывёт из-за width: 100% у button, описанное в chat.css

Comments

[Алексей Ярков]

Спасибо. Не заметил ((

Answer 2

[Teacher]

Попробуй это.

position: absolute;
    float: right;
    margin-right: 15px;
    padding: 9px 10px;
    margin-top: 13px;
    margin-bottom: 13px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 0;
}

Comments

[#rybak]

position: absolute;
float: right;

огоспаде
не надо так

Answer 3

[#rybak]

.navbar-toggle {margin-right: 15px}
сдвигает на 15 пиксулей влево
прост убери его

для нормального отступа задай внутренний отступ родителю
.navbar-header{padding: 15px}