Я делаю сайт, и сначала я начинаю с таблицы мобильных стилей. Но ширина контейнера-жидкости не совпадает с шириной окна.
Что я пытался сделать, чтобы исправить это:
.container-fluid{
width: 105%
}
Теперь проблема заключается в том, что, когда я делаю окно немного меньшим, этого все равно недостаточно, но когда я делаю окно немного больше, оно слишком много, когда я делаю это, полоса прокрутки появляется внизу.
100% не работает, так как я уже сказал, что это не полная ширина окна.
Здесь весь объект из файла HTML:
<body>
<!-- Introduction -->
<div id="introduction" class="container-fluid">
<div class="row">
<header>
<h1> Mosescu Bogdan Gabriel </h1>
<img id="profilepic" src="profilepic.png" />
<h2> Web Designer | Motion Graphics Artist </h2>
</header>
</div>
</div>
<!-- //Introduction// -->
<div id="about" class="container-fluid">
<div class="row">
<h1 id="about-title"> Who I am </h1>
</div>
</div>
</body>
и это файл CSS:
/*Introduction CSS */
#introduction{
background-color: #542437;
color: white;
margin-top: -21px;
}
#introduction header{
text-align: center;
}
#introduction header h1{
font-family: montserrat;
font-weight: bold;
}
#introduction header h2{
font-family: montserrat;
font-weight: normal;
font-size: 1em;
}
#profilepic{
border-radius: 100%;
width: 150px;
height: 150px;
}
/* //Introduction CSS// */
/* About CSS */
#about{
background-color: #f2f2f2;
color: #1a1a1a;
text-align: center;
margin-top: -24px;
}
#about-title{
font-family: montserrat;
font-weight: bold;
font-size: 2.25em;
border-bottom: solid 1px black;
}
