во-первых, я действительно плохо с css! У меня странные проблемы ... но сначала позвольте мне показать вам мое приложение
Вот экран: (левая боковая панель расширена) 
(левая боковая панель скрыта) 
Пожалуйста, посмотрите на полосу прокрутки вокруг холста, покрытого сеткой. Эта полоса прокрутки выглядит так, потому что у нее margin-top и margin-left = 20. Посмотрите на это:
Если я удалю это поле в этом месте, Посмотрите, как это будет выглядеть: 
Как видите, все выглядит хорошо. Мне нужно было показать вам это с дебаггером на моей левой стороне, потому что, если я закрою его, то сразу это поле вернется. Мне нужно было показать это с отладчиком на правой стороне, потому что, если я закрою его, то это поле сразу же вернется. Вот мой код этой части "сетки":
<div id="justdraw" style="position: static; width: 1600px; height: 600px;">
<!-- The Diagram component is bound to the canvas element below -->
<div id="ruler" style="position: static; width: 100%; height: 100%;">
<div id="canvas" style="position: absolute; width: 1600px; height: 600px; margin-top: 0; margin-left: 0; overflow: scroll">
<canvas id="diagram" width="2100" height="2100">
This page requires a browser that supports HTML 5 Canvas element.
</canvas>
</div>
</div>
</div>
Я использую фрагменты Thymeleaf, этот код является фрагментом, и он используется здесь:
<!-- Page Content -->
<div id="content" style="position: relative;">
<th:block th:include="diagramER :: diagram"/>
</div>
Может кто-нибудь скажи мне, что может быть причиной этого? Как это возможно, что стили в браузере показывают что-то отличное от того, что есть в коде?
Стили из браузера:
element.style {
position: absolute;
width: 1600px;
height: 600px;
overflow: scroll;
margin-top: 20px;
margin-left: 20px;
}
Стили из моего кода:
<div id="canvas" style="position: absolute; width: 1600px; height: 600px; margin-top: 0; margin-left: 0; overflow: scroll">