Не могу сдвинуть контент влево с bootstrap

@itnub · Регистрация: 20.12.2020

Author24 — интернет-сервис помощи студентам

Все уже перепробовала, максимум получилось сдвинуть абзац с портфолио. Так опять справа зазор пустой. А карточки не хотят вообще двигаться к левому краю. Помогите кто-нить? пожалуйста(

HTML5

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="row">
        <nav class="navbar navbar-expand-lg fixed-top navbar-light">
            <div class="container-fluid">
                <a class="navbar-brand text-white" href="#">НЛК</a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Переключатель навигации">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav">
                
                        <li class="nav-item"><a class="nav-link active text-white" aria-current="page" href="#">Портфолио</a></li>
                        <li class="nav-item"><a class="nav-link text-white" href="#">Рейтинг</a></li>
                        <li class="nav-item"><a class="nav-link text-white" href="#">Помощь</a></li>
                    </ul>
                </div>
            </div>
        </nav>
        <header class="header">
            <div class="overlay"> 
                <div class="container-fluid d-flex justify-content-end">
                    <div class="description text-start" class="col-lg-7 col-md-11 col-xs-6" style="background-color: #8889CE9F;">
                        <h1 class="display-4">Портфолио</h1>
                         
                         <p class="lead" >
                            Это место, где собраны ваши научные публикации. 
                            Здесь вы можете добавлять свои научные работы, 
                            получать информацию об их уникальности 
                            и смотреть отзывы ваших научных руководителей.</p>
                         <button class="btn btn-primary btn-lg">Добавить работу</button>
                       </div>
                </div>
            </div>
        </header>
        <div class="container-fluid">
            <div class="row">
                <div class="col-xs-6 col-md-12 col-lg-9 card-deck d-flex justify-content-start">
                    <div class="card" style="width: 18rem;">
                        <div class="card-header">
                            <p>Ваш профиль</p>
                        </div>
                        <div class="card-body">
                            <p><b>Научная степень:</b> Магистр.</p>
                            <p><b>Специализация:</b> Инвестиционные проблемы экономически развивающихся рынков.</p>
                        </div>
                        <a href="#" class="btn btn-primary">Редактировать</a>
                    </div>
                    <div class="card" style="width: 18rem;">
                        <div class="card-header">
                            <p>Статистика</p>
                        </div>
                        <div class="card-body">
                            <p><b>На платформе:</b> 2 года.</p>
                            <p><b>Добавлено работ:</b> 10.</p>
                            <p><b>Средняя уникальность:</b> 75%.</p>
                            <p><b>Языки работ:</b> русский, английский.</p>
                        </div>
                    </div>
                </div>
 
            </div>
        </div>
    </div>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/script.js"></script>
</body>
</html>

CSS

body {
  max-width: 1219px;
  margin: 0 auto;
}
.navbar {
  background-color: #343A40;
  color: #fff;
}
.nav-link .navbar-brand {
  color: #f4f4f4;
  cursor: pointer;
}
  
.nav-link:hover {
  background: green;   
}
   
.navbar-toggler {
  background:#fff !important;
}
header {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
  top: 56px;
  /*padding-top: 10px;
  padding-bottom: 28px;*/
}
 
 
 
.overlay {
  position: absolute;
  min-height: 100%;
  min-width: 100%;
  left: 0;
  top: 0;
}
 
 .description{
  position: absolute;
  justify-content: flex-start;
  top: 7%;
  margin: auto;
  padding: 2em;
}
.description h1{
  color:#F97300 ;
}
.description p{
  color:#666;
  font-size: 20px;
  width: 50%;
  line-height: 1.5;
}
.description button{
  border:1px  solid #F97300;
  background:#F97300;
  color:#fff;
}
 
.card {
  display: flex; 
  justify-content: center;
  top: 150%;
}

Добавлено через 1 час 16 минут
Удалось подвинуть с помощью style="margin-left: -12%; Правильно сделала или нет, не знаю. Пустое место у портфолио справа еще осталось убрать(

@NTHing · 06.01.2023, 20:54

Не сильно понял, что в итоге нужно... Пробую уточнить хотя бы что-то одно... Если у .description убрать position: absolute нормально будет..?

@itnub · 08.01.2023, 14:41 **[ТС]**

Благодарю за ответ! Забыла класс row добавить)

Новые блоги и статьи
Книги и учебные ресурсы по C# InfoMaster 08.01.2025 Базовые учебники и руководства Одной из лучших книг для начинающих является "C# 10 и . NET 6 для начинающих" Эндрю Троелсена и Филиппа Джепикса . Книга последовательно раскрывает основные концепции. . .	Что такое NullReferenceException и как исправить? InfoMaster 08.01.2025 NullReferenceException - одно из самых распространенных исключений, с которым сталкиваются разработчики на C#. Это исключение возникает при попытке обратиться к членам объекта (методам, свойствам или. . .	Что такое Null Pointer Exception (NPE) и как это исправить? InfoMaster 08.01.2025 Null Pointer Exception (NPE) - это одно из самых распространенных исключений в Java, которое возникает при попытке использовать ссылку на объект, значение которой равно null. Это исключение относится. . .	Русский язык в консоли C++ InfoMaster 08.01.2025 При разработке программ на C++ одной из частых проблем, с которой сталкиваются русскоязычные программисты, является корректное отображение кириллицы в консольных приложениях. Эта проблема особенно. . .	Telegram бот на C# InfoMaster 08.01.2025 Разработка ботов для Telegram стала неотъемлемой частью современной экосистемы мессенджеров. C# предоставляет мощный и удобный инструментарий для создания разнообразных ботов, от простых. . .	Использование GraphQL в Go (Golang) InfoMaster 08.01.2025 Go (Golang) является одним из наиболее популярных языков программирования, используемых для создания высокопроизводительных серверных приложений. Его архитектурные особенности и встроенные. . .
Что лучше использовать при создании класса в Java: сеттеры или конструктор? Alexander-7 08.01.2025 Вопрос подробнее: На вопрос: «Когда одновременно создаются конструктор и сеттеры в классе – это нормально?» куратор уточнил: «Ваш класс может вообще не иметь сеттеров, а только конструктор и геттеры. . .	Как работать с GraphQL на TypeScript InfoMaster 08.01.2025 Введение в GraphQL и TypeScript В современной разработке веб-приложений GraphQL стал мощным инструментом для создания гибких и эффективных API. В сочетании с TypeScript, эта технология. . .	Счётчик на базе сумматоров + регистров и генератора сигналов согласования. Hrethgir 07.01.2025 Создан с целью проверки скорости асинхронной логики: ранее описанного сумматора и предополагаемых fast регистров. Регистры созданы на базе ранее описанного, предполагаемого fast триггера. То-есть. . .	Как перейти с Options API на Composition API в Vue.js BasicMan 06.01.2025 Почему переход на Composition API актуален В мире современной веб-разработки фреймворк Vue. js продолжает эволюционировать, предлагая разработчикам все более совершенные инструменты для создания. . .	Архитектура современных процессоров inter-admin 06.01.2025 Процессор (центральный процессор, ЦП) является основным вычислительным устройством компьютера, которое выполняет обработку данных и управляет работой всех остальных компонентов системы. Архитектура. . .	История создания реляционной модели баз данных, правила Кодда Programming 06.01.2025 Предпосылки создания реляционной модели В конце 1960-х годов компьютерная индустрия столкнулась с серьезными проблемами в области управления данными. Существовавшие на тот момент модели данных -. . .

@NTHing 1794 / 942 / 383 Регистрация: 26.11.2014 Сообщений: 1,927 Записей в блоге: 1
	06.01.2023, 20:54	2
	Не сильно понял, что в итоге нужно... Пробую уточнить хотя бы что-то одно... Если у `.description` убрать `position: absolute` нормально будет..? 1

@itnub 3 / 3 / 1 Регистрация: 20.12.2020 Сообщений: 15
	08.01.2023, 14:41 [ТС]	3
	Благодарю за ответ! Забыла класс row добавить) 0