Как исправить эту проблему с разделом контента в Bootstrap 4

Question

Я стараюсь держать панель навигации белой внутри контейнера, чтобы она имела такую ​​же ширину, что и содержимое. Но у меня есть 2 проблемы, которые не могу понять, как исправить.

1. Я установил полную ширину и полную высоту сечения с градиентом, но, как вы можете видеть, нижняя часть находится вне градиента. Как я могу сделать этот градиентный фон полноразмерным портом?
2. Я установил nav-bar внутри контейнера, чтобы он мог иметь ту же ширину, что и содержимое под ним. Но я хочу разместить навигационную панель внутри того же градиентного фона. Проблема в том, что я не могу разместить панель навигации внутри раздела, потому что я использую Angular, а компонент Nav-bar находится в другом файле.

Есть ли решения для этих 2 проблем? Я добавляю ссылку примера кода в приведенный ниже комментарий:

Answer 1

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

section {
  background: #2193b0;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #6dd5ed, #2193b0);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #6dd5ed, #2193b0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

   padding-top:5%;
   width:100%;
  /* New code */
   height: 100%;
  overflow: hidden;
  padding-top: 80px;
  margin-top: -80px;
 }

.navbar {
  position: relative;
  background-color. rgba(0, 0, 0, 0);
	 box-shadow: 0 2px 2px -2px rgba(0,0,0,.2);
}

.nav-item{
	margin:5px;
}

.signin, .signup {
	border:2px solid;
  
}

.signin {
	border-color:#232323 !important;
}

nav .nav-item ul li a.signin {
	color:#232323;
}

.signin:hover {
	background-color:#232323;
	color:#ffffff;
}

nav .nav-item ul li .signin a :hover {
	color:#ffffff;
}

.signup {
	background-color:#44A423;
	border-color:#44A423;
}
.navbar-light .navbar-nav .nav-item .nav-link {
   
    font-size:23px;
    padding:10px 20px;
}

.navbar-light .navbar-nav .nav-item.signup .nav-link {
    color:#fff;
    font-size:23px;
}



.emp-profile{
     padding: 5%;
     border-radius: 0.5rem;
     background: #fff;
 }
 .profile-img{
     text-align: center;
 }
 .profile-img img{
     width: 70%;
     height: 100%;
 }

 .main-col h5{
     color: #333;
 }
 .main-col h6 {
     color: green;
   margin-bottom:30px
 }
 
 
 .row-details {
   margin-top:30px
 }
 
 
 
 .profile-tab label{
     font-weight: 600;
 }
 .profile-tab p{
     font-weight: 600;
       color: green;
 }
 
  .img-content {
   margin: 30px 15px !important
 }

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

    <div class="container">
<nav class="navbar navbar-expand-md  bg-faded ">
  <a class="navbar-brand" href="#">
    <img src="../assets/images/close.png" class="img-fluid" style="width:50px; height:50px" alt="">
  </a>

    <button class="navbar-toggler" type="button"
          >
    <span class="navbar-toggler-icon"></span>
  </button>


 <div class="collapse navbar-collapse"
      >
    <ul class="navbar-nav ml-auto">
     
      <li class="nav-item">
        <a class="nav-link" routerLink="/home" >Item 1</a>
      </li>

      <li class="nav-item signin">
        <a class="nav-link" routerLink="/sign-in" >Sign in</a>
      </li>

       <li class="nav-item signup">
        <a class="nav-link" routerLink="/sign-up" >Sign Up</a>
      </li>
      
      
    </ul>
  </div>
</nav>
</div>
<section>
      <div class="container">
        <div class="emp-profile justify-content-center">
          <form method="post">
            <div class="row">
              <div class="col-md-4">
                <div class="profile-img">
                  <img src="https://picsum.photos/50" alt="" />
                </div>
              </div>
              <div class="col-md-8 col-sm-12 col-12">
                <div class="tab-content profile-tab" id="myTabContent">
                  <div class="row">
                    <div class="col-md-4 main-col col-sm-12  col-12 d-flex d-sm-block flex-column align-items-center">
                      <h5>
                        Kshiti Ghelani
                      </h5>
                      <h6>
                        24 Years Old
                      </h6>
                    </div>
                    <div class="col-md-3 col-sm-6 col-6">
                      <a href="#" class="btn button-image closeButton btn-match float-right">Follow</a>

                    </div>
                    <div class="col-md-2 col-sm-6 col-6">
                      <a href="#" class="btn button-image closeButton btn-message">Message</a>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-6 d-flex">
                      <label>Username</label>
                      <p class="ml-auto">Kshiti123</p>
                    </div>
                    <div class="col-6 d-flex">
                      <label>Profession</label>
                      <p class="ml-auto">Designer</p>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-6 d-flex">
                      <label>Gender</label>
                      <p class="ml-auto">Female</p>
                    </div>
                    <div class="col-6 d-flex">
                      <label>Job Title</label>
                      <p class="ml-auto">UI Designer</p>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-6 d-flex">
                      <label>Country</label>
                      <p class="ml-auto">UK</p>
                    </div>
                    <div class="col-6 d-flex">
                      <label>City</label>
                      <p class="ml-auto">Oxford</p>
                    </div>
                  </div>



                </div>
              </div>
            </div>
            <div class='row'>
              <div class='col-md-3 img-content'>
                <img src="https://picsum.photos/200" alt="" />
              </div>
              <div class='col-md-3 img-content'>
                <img src="https://picsum.photos/200" alt="" />
              </div>
              <div class='col-md-3 img-content'>
                <img src="https://picsum.photos/200" alt="" />
              </div>
            </div>
            <div class="row">
              <div class="col-md-10">
                <p> Lorem ipsum dolor sit amet, tollit munere quo ne, timeam saperet ea mel. Ad vide essent dolores usu, ponderum salutatus ea duo, est alii commune ea. Pro euismod legimus detracto ad. Ei eius expetenda assueverit vis, cu duo sapientem temporibus,
                  quo minim nostro ut.
                </p>
              </div>
            </div>
          </form>
        </div>
      </div>
    </section>

• Трудно понять, что именно вы хотели сделать.