I decided to add a box to highlight certain queries on a specific page, rather than the entire website. In order to test out this change, I added an inline style. I found that I had to adjust the characters within the pre tags in order to make them fit inside the border box. Is there a way to automatically wrap and center the characters within the div class box, without manually trimming the characters within the pre tags?
<!DOCTYPE html>
<html lang="en>
<!-- header, sitebranding, tagline, and bodycontent -->
<head>
<title> Casper Support </title>
<meta charset="utf-8"/>
<link type="text/css" rel="stylesheet" href="wiki.css" />
<style>
.box {
height: 70px ;
width: 1000px ;
position: relative ;
border: 2px solid #287EC7 ;
background: #F5F5F5 ;
}
</style>
</head>
<body>
<h3 id="overdue_meeting"> The overdue Jira Query </h3>
<p> query </p>
<div class="box">
<pre> <code>
project = Casper AND status != Closed AND (component = "Queue - Support" OR assignee in (casper1, casper2, casper3, casper4, casper5, casper6, casper7, casper8)) AND (duedate < 7d OR duedate < endOfDay() OR duedate is EMPTY) ORDER BY id ASC
</code> </pre>
</div>
</body>
</html>