try this:
[dohtml]<style>
.twit{
width: 450px;
height: 100px;
background-image: linear-gradient(-90deg, #d5d8f2, #9aa1d6);
padding-top: 1px;
padding-left: 3px;
}
.fas {
margin-left: 67px;
margin-top: 27px;
font-size: 50px;
color: white;
text-shadow: 3px 3px 1px #000;
}
.twitrightarea {
-webkit-clip-path: polygon(51% -99%, 100% 0%, 100% 100%, -0% 100%); clip-path: polygon(51% -99%, 100% 0%, 100% 100%, -0% 100%);
width: 163px;
height: 100px;
background-color: #a0a6db;
position: absolute;
z-index: 1;
padding: 1px 1px;
margin-left:400px;
margin-top: -2px;
}
.twitlyrics
{font-family: 'Abel', sans-serif;;
font-size: 22px;
color: white;
text-shadow: 2px 1px 3px #000000;
margin-left: 10px;
margin-top: 34px;
line-height: 1.4;
padding: 1px 3px 1px 9px;
letter-spacing: 1.5px;
font-weight: bold;
text-transform: uppercase;
}
.twitbox {
width: 567px;
height: 450px;
background-color: #3a3a3a;
}
.twiticonholder {
width: 100px;
height: 100px;
margin-left: 15px;
margin-top: 150px;
position: absolute;
border: 3px solid #9aa1d6;
border-radius: 100px;
}
.twiticonholder img {border-radius: 100px }
.twittagbox {
width: 567px;
height: 35px;
background-color: #9aa1d6;
display: table-cell;
vertical-align: middle;
}
.twittagboxword {
font-family: Verdana;
font-size: 12px;
text-align: center;
color: white;
}
.twitleftarea {
height: 450px;
width: 150px;
background-color: #262626;
}
.twitlyrics2{
font-family: 'Abel', sans-serif;
color: #9aa1d6;
font-weight: 900;
text-transform: uppercase;
font-size: 22px;
margin-left: 10px;
}
.twitpostwords {
font-family: Verdana;
font-size: 11px;
color: white;
}
.twitscroll { height: 400px; overflow:auto;
text-align:justify;
line-height:13px;
font-size:10px;padding:20px; }
.twitscroll::-webkit-scrollbar { width: 10px; }
.twitscroll::-webkit-scrollbar-thumb { background-color:#8d93c4; }
}
</style>
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<center>
<div style="width: 450px;">
<div class="twit"><div class="twitrightarea"><i class="fas fa-heart-broken"></i> </div><div class="twitlyrics">You’re a fool who only knows me</div></div>
<div class="twitbox">
<table><tr><td>
<div class="twitleftarea"> <div class="twiticonholder"><img src="https://i.imgur.com/DvEUF3F.png"></div> <div class="twitlyrics2"> "but why are you the only one feeling unhappy?"</div> </div> <div class="twitpostwords">
</td><td>
<div class="twitscroll">honk honk honk honk honk honk honk honk honk honk honk honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon <p> honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk honhonk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon honk honk honk honk honk hon</p> honk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk honhonk honk honk honk honk hon</div>
</td></tr></table>
<div class="twittagbox"><div class="twittagboxword">@tag</div></div>
</div> </div> <div></div>
</div>
</center>[/dohtml]
your css was repeated for some reason, so i deleted about half of it. i hope i didn't delete anything essential to your design,,,
having a wrapper with a set width around your entire template will help keep it aligned when you center it. the middle parts are squished like that because you positioned them with margins. in general, you want to avoid positioning things with margins if you can help it, because why estimate everything right down to the exact pixel when you can just let the computer do it all for you? because of that, i deleted all your margins and put the middle part of your template (the left sidebar and the content stuff next to it) inside a table.
| 
