при уменьшении экрана пропадает часть текста
вопрос такой как правильно сделать, чтобы не обрезалось пространство?
html
<!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">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<title>CVSCenter_QuickGuide</title>
</head>
<body>
<div class="parent">
<div class="inner-left">
<li class="btn toclevel-1 tocsection-1"><a href="#Введение"><span class="tocnumber"></span>
<span class="toctext">Введение</span></a></li>
<li class="btn_2 toclevel-1 tocsection-2"><a href="#Общие_положения"><span class="tocnumber">1</span>
<span class="toctext">Общие положения</span></a></li>
<li class="btn_3 toclevel-1 tocsection-3"><a href="#Алгоритм_действий"><span class="tocnumber">2</span>
<span class="toctext">Алгоритм действий</span></a>
<ul>
<li class="btn_4 toclevel-2 tocsection-4"><a href="#Предварительная_настройка"><span
class="tocnumber">2.1</span> <span class="toctext">Предварительная
настройка IP камер</span></a>
</li>
<li class="btn_5 toclevel-2 tocsection-5"><a href="#Установка_комплекта"><span
class="tocnumber">2.2</span> <span class="toctext">Установка комплекта программного
обеспечения</span></a>
</li>
<li class="btn_6 toclevel-2 tocsection-6"><a href="#Добавление_камер"><span
class="tocnumber">2.3</span> <span class="toctext">Добавление камер в серверную часть
комплекса</span></a>
</li>
<li class="btn_7 toclevel-2 tocsection-7"><a href="#Настройка_подключения"><span
class="tocnumber">2.4</span> <span class="toctext">Настройка подключения датчиков /
реле</span></a>
</li>
</ul>
</div>
<div class="inner-right">
<div class="un_1 " style="display: none">
<h1> <span class="mw-headline" id="Введение">Введение</span><span class="mw-editsection"></h1>
<div class="unit_1">
<p>
Для того, чтобы облегчить чтение, в предлагаемом руководстве используются следующие
соглашения о шрифтах и графических обозначениях:
<p><span class="bold">Полужирный</span> – названия систем CVS.</p>
<p><span class="bold_curs fst-italic">Полужирный курсив</span> – названия и определения в
системах CVS.</p>
<p><span class="fst-italic text-decoration-underline">Подчеркнутый курсив</span> – названия
элементов управления в программах CVS.</p>
<p><span class="text-decoration-underline">Подчеркивание</span> – общепринятые названия или
определения.</p>
<p><span class="fst-italic">Курсив</span> – названия …</p>
<p><span class="numer">
<ul>
<li>– списки и перечисления</li>
</ul>
</span></p>
</p>
<p> Так же в тексте используются графические обозначения:</p>
<div class="otstup_1">
<p><img src="img/1.png" class="lft rounded float-start px-3" alt=""></p>
<p class="mlft">Такой знак обозначает информацию, на которой стоит
заострить внимание и учитывать в дальнейшем при работе с
системами CVS.</p>
</div>
<div class="otstup_2">
<p> <img src="img/2.png" class="lft rounded float-start px-3" alt=""></p>
<p class="mlft">Такой знак означает замечания или рекомендации, к которым необходимо
прислушаться для
достижения оптимальной производительности и стабильной работы программно- аппаратных
комплексов.</p>
</div>
<div class="otstup_3">
<p> <img src="img/3.png" class="lft rounded float-start px-3" alt=""></p>
<p class="mlft">Такой знак обозначает примечание, на которое следует обратить
пристальное внимание!</p>
</div>
</div>
</div>
<div class="un_2" style="display: none">
<h2> <span class="mw-headline" id="Общие_положения">1 Общие положения</span><span
class="mw-editsection">
</h2>
<div class="unit_2">
<p> <img src="img/1.png" class="lft rounded float-start px-3 py-3" alt=""> </p>
<p class="tblft ">Системы CVS как с аналоговыми камерами, так и с IP
камерами работают под управлением операционных систем
семейства Windows (x86, 32 bit и x64, 64 bit):
<p class="tblft"><span class="text-decoration-underline">Windows 7</span>,</p>
<p class="tblft"><span class="text-decoration-underline">Windows 8</span>, <span
class="text-decoration-underline">Windows 8.1</span>,</p>
<p class="tblft"><span class="text-decoration-underline">Windows 10</span>,</p>
<p class="tblft"><span class="text-decoration-underline">Windows Server 2008</span>, <span
class="text-decoration-underline">Windows Server 2008 R2</span>,</p>
<p class="tblft"><span class="text-decoration-underline">Windows Server 2012</span>, <span
class="text-decoration-underline">Windows Server 2012 R2</span>,</p>
<p class="tblft"><span class="text-decoration-underline">Windows Server 2016</span>,</p>
<p class="tblft"><span class="text-decoration-underline">Windows Server 2019</span></p>
</p>
</div>
<div class="unt_2">
<p> <img src="img/1.png" class="lft rounded float-start px-3 py-3" alt=""></p>
<p class="tblft "> Внимание !</p>
<p class="tblft ">Все действия должны производиться оператором с административными правами в
операционной
системе.</p>
<p class="tblft ">Разработчики систем CVS подразумевают, что у пользователя имеется опыт в
администрировании
операционных систем Windows.</p>
</div>
</div>
<div class="un_3" style="display: none">
<h2> <span class="mw-headline" id="Алгоритм_действий">2 Алгоритм действий</span<span
class="mw-editsection">
</h2>
<p>Всё актуальное программное обеспечение систем <span class="bold">CVS</span> находится на
сайте cvsnt.ru странице сайта
<span class="fst-italic">«Центра загрузки»</span>
</p>
<p class="llft"> https://www.cvsnt.ru/support_soft.html</p>
<p> На этой странице имеются ссылки на архивы с программным обеспечением и руководствами для
пользователей.</p>
<p><span class="bold">CVSCenter 7</span> — программный комплекс компьютерных телевизионных
систем обеспечения безопасности
<span class="bold">CVS ( Computer Video Security )</span> —
единое программное обеспечение как для видеосерверов, так
и для клиентских рабочих мест.
</p>
<p>Инсталлятор находится в архиве ZIP</p>
<p class="llft">https://www.cvsnt.ru/soft/cvs_v720.zip</p>
<p>Для дальнейшей работы необходимо провести инсталляцию (установку) программного обеспечения на
компьютере.</p>
<ul>
<li>
<span class="fst-italic">Видеосервер</span> — на компьютере, к которому будут
подключаться камеры,
устанавливается комплект программного обеспечения CVSCenter и настраивается
серверная часть ПО: подключения к видеокамерам, микрофонам, обработка
получаемых медиаданных, запись архивов, поддержка работы клиентских приложений
— <span class="bold">CVS Авто</span> или <span class="bold">CVS Авто+</span>, <span
class="bold">CVSAutoServer</span>, <span class="bold">CVSMap</span>, <span class="bold">CVS
FaceDetector</span>, <span class="bold">CVS Mobile
Server</span> и др.
</li>
<br>
<li>
<span class="fst-italic">Видеоклиент</span> — на компьютере, который будет подключаться
к видеосерверу
(видеосерверам), устанавливается комплект программного обеспечения CVSCenter и
настраивается клиентская часть ПО: для просмотра и прослушивания медиаданных в
режиме онлайн, просмотр и прослушивание ранее записанных архивных данных.
</li>
</ul>
<div class="unt_3">
<p>
<img src="img/3.png" class="rounded float-start px-3" alt="">Программное обеспечение
CVSCenter позволяет на одном ПК
одновременно работать как серверной части, так и
клиентской.
</p>
</div>
</div>
</div>
</div>
</div>
<script src="js/bootstrap.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/tst.js"></script>
</body>
</html>
css
Обнуление
{
padding: 0;
margin: 0;
border: 0;
}
*,*:before,*:after{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
:focus,:active{outline: none;}
a:focus,a:active{outline: none;}
nav,footer,header,aside{display: block;}
html,body{
height: 100%;
width: 100%;
font-size: 100%;
line-height: 1;
font-size: 14px;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
}
input,button,textarea{font-family:inherit;}
input::-ms-clear{display: none;}
button{cursor: pointer;}
button::-moz-focus-inner {padding:0;border:0;}
a, a:visited{text-decoration: none;}
a:hover{text-decoration: none;}
ul li{list-style: none;}
img{vertical-align: top;}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: 400;}
/*--------------------*/
body
{
line-height: 1.5;
}
.parent
{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.inner-left
{
width: 150px;
/* outline: 1px solid #060; */
}
.inner-right
{
flex-basis: 150px;
flex-grow: 1;
/* outline: 1px solid #900; */
background: firebrick;
}
.otstup_1
{
padding-bottom: 50px;
position:relative;
}
.otstup_2
{
padding-bottom: 50px;
position:relative
}
.otstup_3
{
padding-bottom: 50px;
position:relative
}
.lft
{
position:absolute;
top:0px;
left:0px;
vertical-align: middle;
display: inline-block
}
.mlft
{
padding-top: 1%;
margin-left: 3cm;
vertical-align: middle;
display: inline-block
}
.unt_2
{
padding-bottom: 50px;
position:relative
}
.tblft
{
padding-top: 1%;
margin-left: 3cm;
/* vertical-align: middle; */
}
/* .un_2
{
padding-bottom: 50px;
position:relative
} */
.unit_2
{
padding-bottom: 50px;
position:relative
}
.llft
{
padding-left: 2%;
}
.bold
{
font-weight: 600;
}
.bold_curs
{
font-weight: 600;
}
.unt_3
{
padding-bottom: 50px;
position:relative
}
.otstup_4
{
padding-bottom: 20px;
/* position:relative */
}
.cntr
{
text-align: justify;
}
.un_4_1
{
padding-bottom: 50px;
position:relative
}
.check::before
{
content: "✓";
}
.image-container
{
max-width: 1169px;
/* height: 50%;
overflow: hidden;
display: flex;
width: 100%;
margin: 1em auto;
border: 1px solid red;
justify-content: center; */
}
@media only screen and (max-width: 1321px)
{
image-container
{
width: 90%;
}
}
@media only screen and (max-width: 1260px)
{
image-container
{
width: 80%;
}
}
@media only screen and (max-width: 1230px)
{
image-container
{
width: 70%;
}
}
@media only screen and (max-width: 412px)
{
image-container
{
width: 10%;
}
}