Для создания блока с текстом, прижатым к левой стороне экрана, можно использовать CSS свойство "position: fixed". Например:
```html
<div class="content-wrapper">
<div class="left-block">
<p>Текст блока</p>
</div>
<div class="main-content">
<!-- Остальной контент -->
</div>
</div>
```
```css
.left-block {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
}
main-content {
margin-left: 200px; /* Ширина блока с текстом */
}
```
При таком подходе блок с текстом будет прижат к левой стороне экрана и не нарушит выравнивание остального контента.
Чтобы создать блок с цветной подложкой, который также будет прилипать к левому краю экрана, можно добавить свойство "background-color" к блоку "left-block". Например:
```css
.left-block {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
background-color: #f1f1f1;
padding: 20px;
width: 200px;
}
```
При использовании класса "container" в Bootstrap, текст внутри блока будет автоматически выравниваться согласно стилям класса. Если вставить блок с классом "container" внутри блока "left-block", то текст внутри блока будет начинаться от левой границы контента:
```html
<div class="left-block">
<div class="container">
<p>Текст блока</p>
</div>
</div>
```
```css
.left-block {
position: fixed;
left: 0;
top: 50%;
transform: translateY(-50%);
background-color: #f1f1f1;
padding: 20px;
width: 200px;
}
```
Это исправит проблему с блоком, который уходит за левую часть экрана и начинает появляться справа.
Другой способ решить эту задачу - использовать CSS свойство "float: left" для блока с текстом. Например:
```html
<div class="content-wrapper">
<div class="left-block">
<p>Текст блока</p>
</div>
<div class="main-content">
<!-- Остальной контент -->
</div>
</div>
```
```css
.left-block {
float: left;
background-color: #f1f1f1;
padding: 20px;
width: 200px;
}
```
При таком подходе блок с текстом также будет прижат к левому краю экрана и текст внутри блока будет начинаться от левой границы контента. Однако, следует учитывать, что использование свойства "float" может повлиять на расположение остального контента, поэтому может потребоваться настройка остальных частей макета.
