Currently, I'm facing an issue with displaying PHP and Javascript code within pre tags in a project. The problem arises as the code spills outside the boundary of the containing element. While inspecting the console, I am attempting to identify the source of width for the element or determine the width of the container div. Despite setting a width of 100% for the parent wrapper div in the CSS file, some containing elements exhibit narrower widths that are not visible in the console inspection. The overflow of the pre tag beyond the border can be observed here:
CSS
body {
font:1.1em 'Source Sans Pro';
}
h1,
h2,
h3,
h4,
h5 {
font-weight:400;
}
.hidden {
display:none;
}
.wrapper {
width:100%;
max-width:600px;
margin:0 auto;
}
.upload-console {
background:#fefefe;
border:2px solid #eee;
padding:20px;
}
.upload-console-header {
padding:0 0 20px 0;
margin:0;
border-bottom:2px solid #eee;
font-weight:600;
margin-bottom:20px;
}
.upload-console-drop {
height:200px;
border:2px dashed #ccc;
line-height:200px;
color:#ccc;
text-align:center;
margin-bottom:20px;
}
.upload-console-drop.drop {
border-color:#222;
color:#222;
}
.upload-console-body {
margin-bottom:20px;
}
.bar {
width:100%;
background:#eee;
padding:3px;
border-radius:3px;
box-shadow:inset 0 1px 3px rgba(0,0,0,.2);
box-sizing:border-box;
margin-bottom:20px;
}
.bar-fill {
height:30px;
display:block;
background:cornflowerblue;
width:0;
border-radius:3px;
-webkit-transition:width 0.8s ease;
transition:width 0.8s ease;
}
.bar-fill-text {
color:#fff;
line-height:30px;
margin-left:5px;
}
.upload-console-upload {
border-bottom:2px solid #ccc;
margin-bottom:10px;
padding-bottom:10px;
}
.upload-console-upload span {
float:right;
}
pre {
border: 1px solid black;
}
How can I identify the source of an element's width and ensure that the code remains within the pre tag? Thank you.