Having an issue where the margin of my elements is affecting their total width, even with the box-sizing: border-box property in place.
There are 2 elements - a sidebar and main content div - that stack neatly until margins are added and the sidebar moves on top of the content.
* {
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: 25%;
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>Expecting the output to show the sidebar on the left and the content next to it without being affected by defined margins or paddings.