Вам нужно добавить box-sizing:border-box; в свой универсальный селектор, проверьте это: https://www.w3schools.com/cssref/css3_pr_box-sizing.asp
* {
box-sizing:border-box;
font-family: 'Roboto', sans-serif;
}
После этого вам нужно сделать несколько изменения в классе боковой панели, поверните margin-left и margin-right на padding-left и padding-right
.sidebar {
width: 25%;
height: 100%;
margin-top: 10px;
float: left;
background-color: #eaf4f7;
padding-left: 10px;
padding-right: 10px;
}
. В качестве отступа задайте пространство внутри width: 25%;, поле задайте пространство вокруг width: 25%;, так что это увеличивает значение на 25%, а раскладка разбивается на две строки
ОБНОВЛЕНИЕ
Используя поля вместо отступов, вы можете добавить width: calc(25% - 20px);, первое значение - это ширина элемента div, а второе - сумма значений полей
* {
font-family: 'Roboto', sans-serif;
}
body {
width: 1265px;
display: inline-block;
box-sizing: border-box;
}
main {
margin: auto;
}
.centerContent {
width: 75%;
margin: auto;
float: right;
}
.sidebar {
width: calc(25% - 20px);
height: 100%;
margin-top: 10px;
float: left;
background-color: #eaf4f7;
margin-left: 10px;
margin-right: 10px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
code {
width: 600px;
font-family: 'Source Code Pro', monospace;
color: #43892a;
background-color: #000;
display: block;
}
header {
margin-left: 15px;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #a72525;
}
<body>
<header>
<h1>Batch Documentation</h1>
</header>
<main class="clearfix">
<div class="sidebar">
<ul>
<li>Test</li>
<li>Test2</li>
<li>Test3</li>
</ul>
</div>
<div class="centerContent">
<h2>Sample text</h2>
<code>Hello</code>
</div>
</main>
</body>