I'm currently working on a documentation website and I'm facing an issue with my code blocks. I can't seem to set a specific width for them; instead, the width is determined by the text content they contain.
What I really want is for the code block to have a fixed width, so that the text inside it wraps according to that width, rather than the size of the text limiting the code block.
* {
width: 1265px;
font-family: 'Roboto', sans-serif;
}
body {
display: inline-block;
}
main {
margin: auto;
}
.centerContent {
width: 75%;
margin: auto;
float: right;
}
.sidebar {
width: 25%;
margin-top: 10px;
float: left;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
code {
width: 600px;
font-family: 'Source Code Pro', monospace;
color: #43892a;
background-color: #000;
}<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>Interestingly, I'd like my code block to resemble the ones used on this website, particularly in terms of size rather than color.