0
[![Картинка логотипа][1]][1]    <!DOCTYPE html>
    <html lang="uk">
    <head>
        <meta charset="utf-8">
        <title>Test</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,300" type="text/css">
      <link rel="shortcut icon" href="img/logo.png" type="image/x-icon">
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
      <script src="index.js"></script>
      <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Oswald:400,300" type="text/css">
      <link rel="stylesheet" href="test.css">
      <style type="text/css">
        body{
      padding: 0;
      webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .05);
      box-shadow: 0 0 7px rgba(0, 0, 0, .50);
      width: 1170px;
      height: 100%;
      position: relative;
      margin: auto; 
    
    }
    header{
      font: normal 16px sans-serif;
      font-family: 'Oswald';
      color: #229fff;
      height: 90px ;
      text-decoration: none;
    align-items: center;
    
    }
    
    .row{
    display: block;
    
    }
    .navbar{
        justify-content: center;
    }
    
    .navbar-light .navbar-brand{
      color: #229fff;
      margin-left: 10px;
      text-transform: uppercase;
    }
    .navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
      color:#229fff ;
    }
    .navbar-nav{
      color:#229fff ;
    }
    a.nav-link{
      text-align: center;
    
    }
    .call{
      text-align: center;
    }
    .navbar-light .navbar-nav .nav-link{
      margin-left: 5px;
      color: #229fff;
    position: relative;
    margin-right: 5px;
    white-space: nowrap;
    }
    .navbar-light .navbar-nav .nav-link:after{
      content: "";
      display: block;
      width: 100%;
      height: 3px;
      background-color:#54a2eb;
      position: absolute;
      top: 100%;
      left: 0;  
      z-index: 1; 
      display: none;
    }
    .navbar-light .navbar-nav .nav-link:hover{
      color:#54a2eb;
    }
    .navbar-light .navbar-nav .nav-link:hover:after{
      display: block;
    }
    .call{
      background-color: #f7941d;
      width: 330px;
      height: 40px;
      margin-left: 10px;
    align-items: center;
    padding: 5px;
    margin: auto;
    
    }
    .num{
      font: normal 14px sans-serif;
      color: #fff;
    
    }
    
      </style>
    </head>
    <body>  
      <header>
        <div class="container header">
          <div class="row ">
           <nav class="navbar navbar-expand-xl navbar-light bg-light">
            <a href="https://water.kherson.ua/"><img class="logo" src="img/logo.png"></a>
            <a class="navbar-brand" href="#">Особистий кабинет</a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Переключатель навигации">
              <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
              <ul class="navbar-nav">
                <li class="nav-item active">
                  <a class="nav-link" href="#">Інформація </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">Водоміри</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#" >Розрахунки</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#" >Оплата</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link " href="#" >Послуга онлайн</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link " href="#" >Профіль</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link " href="https://water.kherson.ua" >Вийти</a>
                </li>
                <li class="nav-item">
                 <div class="call"><img src="https://water.kherson.ua/wp-content/themes/vodokanal/images/support_w1.png"><a href="#" class="num"> Контакт центр:+38(050)811-18-86, 42-22-33</a></div>
               </li>
    
             </ul>
    
           </div>
         </div>
       </div>
     </header>


  [1]: https://i.sstatic.net/z1Z9s.png

3 ответа 3

0

Это из-за класса row у него отрицательные margin-right: -15px и margin-left: -15px. Если вы его используете, то внутри div c .row должен быть div с классом col у него padding-right: 15px;padding-left: 15px; и все нормально отображается.

<div class="container">
  <div class="row">
    <div class="col">
      cодержание
    </div>
  </div>
</div>

0

Без фото не понятно какой именно контент выходит за границы. Если по ширине, это потому что у вас прописана фиксированная ширина и аналогично с высотой. и стили применены не к тем блокам. У бутстрап класс row это display: flex, зачем переопределять, если можно не писать этот класс.

 .container{
  padding: 0;
  webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .05);
  box-shadow: 0 0 7px rgba(0, 0, 0, .50);
  max-width: 1170px;
  width: 100%;
  height: 100%;
  position: relative;
  margin: auto; 
  display: block;

}
.header{
  font: normal 16px sans-serif;
  font-family: 'Oswald';
  color: #229fff;
  min-height: 90px ;
  text-decoration: none;
align-items: center;

}

.navbar{
    justify-content: center;
}

.navbar-light .navbar-brand{
  color: #229fff;
  margin-left: 10px;
  text-transform: uppercase;
}
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
  color:#229fff ;
}
.navbar-nav{
  color:#229fff ;
}
a.nav-link{
  text-align: center;

}
.call{
  text-align: center;
}
.navbar-light .navbar-nav .nav-link{
  margin-left: 5px;
  color: #229fff;
position: relative;
margin-right: 5px;
white-space: nowrap;
}
.navbar-light .navbar-nav .nav-link:after{
  content: "";
  display: block;
  width: 100%;
  height: 3px;
  background-color:#54a2eb;
  position: absolute;
  top: 100%;
  left: 0;  
  z-index: 1; 
  display: none;
}
.navbar-light .navbar-nav .nav-link:hover{
  color:#54a2eb;
}
.navbar-light .navbar-nav .nav-link:hover:after{
  display: block;
}
.call{
  background-color: #f7941d;
  width: 330px;
  height: 40px;
  margin-left: 10px;
align-items: center;
padding: 5px;
margin: auto;

}
.num{
  font: normal 14px sans-serif;
  color: #fff;

}
  <header class="header">
    <div class="container">
      <div class="row ">
       <nav class="navbar navbar-expand-xl navbar-light bg-light">
        <a href="https://water.kherson.ua/"><img class="logo" src="img/logo.png"></a>
        <a class="navbar-brand" href="#">Особистий кабинет</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Переключатель навигации">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav">
            <li class="nav-item active">
              <a class="nav-link" href="#">Інформація </a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Водоміри</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" >Розрахунки</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#" >Оплата</a>
            </li>
            <li class="nav-item">
              <a class="nav-link " href="#" >Послуга онлайн</a>
            </li>
            <li class="nav-item">
              <a class="nav-link " href="#" >Профіль</a>
            </li>
            <li class="nav-item">
              <a class="nav-link " href="https://water.kherson.ua" >Вийти</a>
            </li>
            <li class="nav-item">
             <div class="call"><img src="https://water.kherson.ua/wp-content/themes/vodokanal/images/support_w1.png"><a href="#" class="num"> Контакт центр:+38(050)811-18-86, 42-22-33</a></div>
           </li>

         </ul>

       </div>
     </div>
   </div>
 </header>
1
  • Вставил картинку Commented 17 февр. 2022 в 12:36
0

вместо класса .row пропишите d-flex flex-wrap justify-content-between align-items-center

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.