Содержание Div левого столбца проливается в правый div при масштабировании в ⇐ Html

[Anonymous]

Я начал работать на личном веб -сайте, возвращение к старым кресловым фильмам, обзорным сайтами прошлого. Для дизайна я хочу создать макет с столбцом слева для скриншотов и забавных подписей, колонку справа для основного контента и Navbar вверху. < /P>
Пока все выглядит почти так, как я хочу. Единственная проблема заключается в том, что когда я использую масштаб браузера, картинки переливаются в «основной контент» div. Я хочу, чтобы все оставалось в одном месте, если кому -то нужно масштабировать для лучшего чтения. < /P>

Код: Выделить всё

body {
display: flex;
flex-direction: column;
font-family: Arial, sans-serif;
margin: 0;
}

header {
background: #0073e6;
color: white;
text-align: center;
padding: 1em;
}

.container {
display: flex;
flex: 1;
}

.sidebar {
width: 20%;
background: #f4f4f4;
padding: 1em;
border-width: 1px;
border-style: solid;
font-size: 14px;
font-family: Helvetica;
}

.main-content {
flex: 1;
padding: 1em;
border-width: 1px;
border-style: solid;
font-size: 19px;
font-family: arial;

}

.navbar ul{
list-style-type: none;
display: flex;
align-items: center;
justify-content: center;
background-color: #808080;
padding: 0px;
margin: 0px;
width: 400px;
border: 1px solid;

overflow: hidden;
}

.navbar a{
color: white;
text-decoration: none;
padding: 8px 16px;
display: block;
text-align: center;
}

.navbar last-child a{
border-bottom: none;

}

.navbar a:hover{
background-color: purple;
color: white;

}

.navbar li{
float: left;

}






Title will go here
[*]






Old Man P's Place
[list]
[url=index.html]Home[/url]
[*][url=anime.html]Anime[/url]
[*][url=movies.html]Movies[/url]
[*][url=videogames.html]Video Games[/url]
[/list]





Content here.

(Words here.)

Пример эффекта потока

Подробнее здесь: https://stackoverflow.com/questions/796 ... zooming-in