Fixed it up Chief

<style>.stats-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row dense;
  grid-gap: 3px;
  width: 250px;
  margin: 50px auto;
  position: relative;
  left: -10px;
  top: -30px;
  border: 3px solid white;
  border-radius:10px;
}
@media (min-width: 480px) {
  .stats-wrapper {
    grid-template-columns: 1fr;
  }
}
.stat {
  background: #30425c;
  color: #fff;
  display: flex;
  align-items: center;
  padding-right: 10px;
  border-radius:10px;
}
.stat-label {
  background: #657e95;
  display: inline-block;
  padding: 0 10px;
  position: relative;
  font-weight: bold;
  height: 36px;
  line-height: 36px;
  min-width: 60px;
  border-radius:10px 00px 00px 0px;

}
.stat-label:before {
  content: '';
  position: absolute;
  top: 0;
  right: -20px;
  display: inline-block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 36px 0 0 20px;
  border-color: transparent transparent transparent #657e95;
}
.stat-value {
  margin-left: 30px;
  text-align: right;
  min-width: 20px;
}
.stat-bar {
  display: inline-block;
  height: 5px;
  background: #fff;
  margin-left: 10px;
  border-radius:10px;
}

    .logo_div, .fpix_header, .topad, .fpix_asl_table, .profile_text,
    .nc_profile, #left_container, #profilephoto, #flash_close_butt,
    #start_chat_but, .uppermenu, #buyers_ad, #flashcontent, .yellow_but,
    .bottombar, .byline, .top-links { visibility: hidden; display: none;}

    body{background-color: #F5f5f5;}

    ::-webkit-scrollbar { width: 11px; }

    ::-webkit-scrollbar-track-piece { background-color: #CCC; }

    ::-webkit-scrollbar-thumb:vertical {
    width: 1px;
    border: 5px solid #DDD;
    background-color: #FFF;
    }

    ::-webkit-scrollbar:horizontal { height: 11px; }

    ::-webkit-scrollbar-thumb:horizontal {
    width: 1px;
    border: 5px solid #DDD;
    background-color: #FFF;
    }

    b{color: #AAA;}
    i{color: #BBB;}
    u{text-decoration: none; border-bottom: 1px solid #CCC;}
    strike{color: #DDD;}

    li{margin-left: 25px;}

    h1, h2{
    font-family: 'Poiret One', cursive;
    letter-spacing: 2px;
    margin: 0; padding: 0;
    }

    h1{font-size: 12px;}
    h2{font-size: 9px;}


    #tupp, #leftSide, #rightSide, #avatarbox{
    position: absolute;
    border: 1px solid #DDD;
    -webkit-filter: grayscale(100%);
    }

    #tupp{
    position: fixed;
    left: 0; right: 0;
    top: 0; bottom: 0;
    margin: auto;
    width: 900px;
    height: 500px;
    border: none;
    }

    #leftSide, #rightSide{
    height: 400px;
    width: 432px;
    bottom: 10px;
    }

    #leftSide, #rightSide{background-color: #FFF;}

    #leftSide{left: 10px;}
    #rightSide{right: 10px;}

    #avatarbox{
    right: 10px;
    top: 10px;
    width: 150px;
    height: 150px;
    background-color: #FFF;
    overflow: hidden;
    }

    #avatarbox img{
    margin: 10px 0 0 10px;/* T ? ? L */
    height: 130px;
    border: 0;
    background-color: #CCC;
    }

    #title{
    position: absolute;
    left: 0; right: 0;
    top: 0; margin: 10px 0;
    text-align: center;
    font-size: 50px;
    font-family: 'Poiret One', cursive;
    color: #CCC;
    text-transform: uppercase;
    letter-spacing: 1px;
    }

    #smallBio{
    position: absolute;
    right: 10px;
    bottom: 10px;
    border: 1px solid #DDD;
    height: 215px;
    width: 150px;
    overflow: hidden;
    }

    #bigBio{
    position: absolute;
    left: 10px;
    top: 10px;
    width: 245px;
    height: 378px;
    border: 1px solid #DDD;
    overflow: auto;
    }

    .text{
    margin: 10px;
    text-align: right;
    text-transform: uppercase;
    font-family: Calibri;
    font-size: 10px;
    text-align: justify;
    color: #BBB;
    }

    #smallBio{
    text-align: right;
    text-transform: uppercase;
    font-family: Calibri;
    font-size: 10px;
    text-align: justify;
    color: #BBB;
    }

    #smallBio .text b{
    text-transform: uppercase;
    display: inline-block;
    width: 40px;
    padding-right: 10px;
    text-align: right;
    width: 100%;
    }

    #friendFooter{
    position: absolute;
    left: 10px;
    bottom: 10px;
    border: 1px solid #DDD;
    width: 400px;
    padding-right: 10px;
    height: 100px;
    white-space: nowrap;
    overflow-y: hidden;
    }

    #friendFooter{overflow-y:hidden;overflow-x:scroll;}

    .friendBox{
    width: 186px;
    height: 66px;
    border: 1px solid #CCC;
    margin: 10px 0 0 10px;
    display: inline-block;
    vertical-align: top;
    font-size: 10px;
    font-family: Calibri;
    }

    .friendIcon{
    width: 56px;
    position: relative;
    margin-top: 5px;
    margin-left: 5px;
    padding-right: 5px;
    border-right: 1px solid #CCC;
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
    }

    .friendIcon img{width: 100%;}

    .friendName{
    margin-left: 75px;
    margin-top: -55px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-bottom: 5px;
    color: #AAA;
    }

    .friendBio{
    margin-left: 70px;
    margin-top: 2px;
    font-size: 10px;
    text-align: center;
    font-family: calibri;
    color: #CCC;
    }

    #header{
    position: absolute;
    left: 10px;
    top: 10px;
    width: 410px;
    height: 100px;
    border: 1px solid #DDD;
    overflow: hidden;
    }

    #header img{
    position: absolute;
    margin-left: 10px;
    margin-top: 10px;
    width: 390px;
    -webkit-filter: grayscale(100%);
    }

    #mainTextbox{
    margin-top: 125px;
    margin-left: 10px;
    width: 410px;
    height: 150px;
    border: 1px solid #DDD;
    overflow: auto;
    }

    .tag{
    width: 125px;
    height: 26px;
    margin-top: 10px;
    margin-bottom: 14px;
    line-height: 25px;
    padding-right: 10px;
    text-align: right;
    border: 1px solid #CCC;

    }

    .tag b{
    display: inline-block;
    text-align: left;
    position: relative;
    left: 0;
    float: left;
    margin-left: 10px;
    }

    /* please don't change/edit or remove the following c: */
    #credit{
    position: fixed;
    right: 10px;
    bottom: 10px;
    width: 50px;
    height: 20px;
    line-height: 20px;
    overflow: hidden;
    font-size: 10px;
    border: 1px solid #EEE;
    text-align: center;
    letter-spacing: 2px;
    font-family: 'Poiret One', cursive;
    color: #DDD;
    font-weight: bold;
    text-transform: uppercase;
    }

    #credit:hover{
    color: #000;
    letter-spacing: 3px;
    background-color: #FFF;
    border-color: #AAA;
    }

    #credit, #creditOne, #creditTwo{
    transition: all .5s ease-in-out;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out;
    }

    #credit:hover #creditOne{margin-top: -20px;}
    #credit:hover{cursor: hand;}</style>
<body><div id="tupp"><div id="title">Suro Hikata</div><div id="leftSide"><div id="header"></div><div id="friendFooter"><!-- / / / / / F R I E N D / / / / / --> <div class="friendBox"><div class="friendIcon"><img src="https://i.pinimg.com/236x/63/13/96/631396e40f8c833ab84a9e4cc1437eaf.jpg"; height=60><!-- Avatar -->       </div>          <div class="friendName">Alec Sakamoto</div>          <!-- Name/Username -->         <div class="friendBio">            <!-- Add smaller than 2 lines -->           Close Friend            <br>          </div>        </div>      </div>      <div id="mainTextbox">        <div class="text">          <h1>Power</h1>
His ability called The Gamer, His ability is quite powerful and is considered a 'cheatsy' ability as he can learn skills quite easily from skill books and level them up quickly. Most of the active skills are voice activated. <br>

His ability works like this:<br><br>
► Certain actions in his daily life get turned into skills.<br><br>
► Objects turn into items.<br><br>
► His body works like that of a game character.<br><br>
► After sleeping in a bed he restores HP, MP and all status effects.<br><br>
► Certain technique books are treated as skill books.<br><br>
► Allies can be added to form a party.<br><br>
►This ability can be temporarily extended to others through the use of the party system.<br><br>
►It also can generate certain items from monsters even if the monsters don't have physical bodies. These items include crafting and healing items. This is considered turning an illusion into reality.<br><br>
►It also has the effect of making training areas into full battle areas, as well as making a boss mob appear in all instant dungeon.
►Just by looking at some person or thing, The system automatically informs him of name and level (usually). Using Observe, he can quantify attributes accurately and without bias.<br><br>
►EXP points can be gained by defeating enemies (monsters, ability users, etc.) to completing tasks.Limitations: His ability, while very powerful, does have some limitations to it.<br><br>
► He can't gain certain skills or techniques until he has reached a certain level in a certain area<br><br>
► He can't 'absorb' books based on theories.<br><br>
► He can't combine abilities that don't mesh together.<br><br>
► If stamina (vitality) is more than 4 times lower than his intelligence a deteriorating effect can appear which takes 1 stamina (vitality) point every 24 hours.<br><br>

Status Window: This is a voice command that brings up a window that shows his status (name, class, Health Points (HP), Mana Points (MP), level, attributes, title, money and attribute points). Attributes that can be increased via points gained from leveling.<br><br>

► Strength (STR)<br><br>

► Vitality (VIT)<br><br>

► Dexterity (DEX)<br><br>

► Intelligence (INT)<br><br>

► Wisdom (WIS)<br><br>
►► Magic Resistance increases by 1% every 10 WIS points.<br><br>
►► Mana Regeneration increases by 1% every 10 WIS points.<br><br>

► Luck (LUK)Attributes that can not be directly increased via points gained from leveling.<br><br>

► Physical resistance<br><br>

► Mana (MP)<br><br>

► Mana Regeneration (MR)<br><br>

► Magic Resistance<br><br>

► Health (HP)<br><br>

Inventory Window: This is a voice command that brings up a window that shows all the items he has obtained and stored including the clothes he wears and the weapons he has obtained and equipped. This is seen as a dimensional magic ability.<br><br>

Skill List Window: This is a voice command that brings up a window that shows a list of all the skills he has learned. When the skill icon is selected it shows all the current information about that skill.<br><br>

Options Window: This is a voice command that brings up the options menu.<br>        </div>      </div>    </div>    <div id="rightSide">      <div id="avatarbox">        <img src="http://safebooru.org//images/2640/52bb4ae52e1df83e3e374f377c53be52d368fc63.jpg"; width=130>      </div>      <div id="smallBio">        <center>          <div class="tag"><b>Name</b> Suro Hikata</div>          <div class="tag"><b>age</b> 22 </div>          <div class="tag"><b>Sexuality</b> Straight</div>          <div class="tag"><b>R/S</b> Single</div>          <div class="tag"><b>Occupation</b> Gamer</div>        </center>      </div>      <div id="bigBio">        <div class="text">          <div class="stats-wrapper"><div class="stat"><label class="stat-label" style="border-radius: 10px 0px 0px 0px;">STR</label><span class="stat-value">10</span><span class="stat-bar" style="width: 10%"></span></div><div class="stat"><label class="stat-label">VIT</label><span class="stat-value">10</span><span class="stat-bar" style="width: 10%"></span></div><div class="stat"><label class="stat-label">DEX</label><span class="stat-value">10</span><span class="stat-bar" style="width: 10%"></span></div><div class="stat"><label class="stat-label">INT</label><span class="stat-value">10</span><span class="stat-bar" style="width: 10%"></span></div><div class="stat"><label class="stat-label">WIS</label><span class="stat-value">10</span><span class="stat-bar" style="width: 10%"></span></div><div class="stat"><label class="stat-label" style="border-radius: 0px 0px 0px 10px;">LUK</label><span class="stat-value">15</span><span class="stat-bar" style="width: 15%"></span></div></div>      </div>    </div>  </div></div></body>