Как отделить шапку от контента?

KorniloFF, все уезало

Как отделить шапку от контента?

KorniloFF, чтобы она была наверху страницы, отдельно от контента

Как отделить шапку от контента?

KorniloFF, for-dle.ru

Как отделить шапку от контента?

UnluckySerivelha,

<nav class="navbar navbar-expand-lg navbar-dark bg-dark sticky-top" style="margin: 0 -15px 15px -15px;    border-bottom: 1px solid #26282f;">
  <button class="btn btn-dark navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <a class="navbar-brand" href="/">Блабла<span style="text-transform: none;color: #5c9df5;text-shadow: 1px 1px 21px #5c9df5;">.ru</span></a>

  <div class="collapse navbar-collapse" id="navbarTogglerDemo03">
    <ul class="navbar-nav mr-auto">
        <li class="nav-item"><a class="nav-link" href="/users.html"><i class="icon-people fc"></i> Пользователи</a></li>
        <li class="nav-item"><a class="nav-link" href="/informaciya/5-o-proekte.html" ><i class="icon-info fc"></i> О проекте</a></li>
        <li class="nav-item"><a class="nav-link" href="/index.php?do=feedback"><i class="icon-call-in fc"></i> Контакты</a></li>
        <li class="nav-item"><a class="nav-link" href="/blogs/"><i class="icon-layers fc"></i> Блог</a></li>
        <li class="nav-item"><a class="nav-link" href="/statistics.html"><i class="icon-graph fc"></i> Статистика</a></li>
        <li class="nav-item"><a class="nav-link" href="/rules.html"><i class="icon-shield fc"></i> Правила</a></li>
      </ul>
    <ul class="navbar-nav">
        <li class="nav-item">
          <a href="#" class=" nav-link" data-toggle="modal" data-target="#auth">
              <img src="{foto}" style="width: 32px;height: 32px;margin: -13px 5px -10px 0px;border-radius: 50%;object-fit: cover;"> %username_login%
          </a>
        </li>
      </ul>
  </div>
</nav>

.navbar-brand {
  display: inline-block;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
}

.navbar-brand:focus, .navbar-brand:hover {
  text-decoration: none;
}

.navbar-nav {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
      flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.navbar-nav .nav-link {
  padding-right: 10px;
    padding-left: 10px;
}

.navbar-nav .dropdown-menu {
  position: static;
  float: none;
}

.navbar-text {
  display: inline-block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.navbar-collapse {
  -ms-flex-preferred-size: 100%;
      flex-basis: 100%;
  -ms-flex-align: center;
      align-items: center;
}

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background: transparent;
  border: 1px solid transparent;
}

.navbar-toggler:focus, .navbar-toggler:hover {
  text-decoration: none;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background: no-repeat center center;
  background-size: 100% 100%;
}

Как сделать, чтоб статус увеличивался автоматически?

<div class="up_pict_text">
            Михаил 
            <div class="up_p_status">
             <div class="up_p_status_text_arrow"></div>
                <div class="up_p_status_text">
                   
                    Fack the system i am not surrender  
                </div>

.up_p_status {
    position: absolute;
    left: 20px;
    top: -40px;
}
.up_p_status_text_arrow {
    position: absolute;
    width: 19px;
    height: 11px;
    bottom: -11px;
    left: 10px;
    background: url(../images/up_p_status_arrwo.png) no-repeat;
}
.up_p_status_text {
    background: #fff;
    max-width: 400px;
    height: 25px;
    line-height: 25px;
    padding: 0 10px;
    font-family: 'proxima_nova_rgregular';
    font-size: 12px;
    color: #141D23;
    position: relative;
    overflow: hidden;
}