如何格式化CSS以便对齐

Question

如果文字我的帐户超过了某个尺寸，则会丢失格式。 我试过了，但没有什么能像我希望的那样。

<div class="dropdown">
    <a id="account" class="account" href="#">
       <h2>My Account</h2>
    </a>
    <div class="submenu" style="display: none">
       <ul class="root">
          <li><a href=''>Watch List</a></li>
       </ul>
    </div>
   <div class="pic">
      <a href="/profile/"><img class="circular" src="../images/avatar.png" style="margin-left: 26px" /></a>
   </div>
</div>

风格：

#account {
    text-decoration: none;
    text-transform: none;
    color: white;
}

#account:hover {
    color: #9cdb16;
}

.navi li {
    display: inline-block;
    position: relative;
    border-right: 1px solid #888;
    text-align: center;
}

.navi li a:link,
.navi li a:visited {
    color: #fff;
    text-decoration: none;
    display: inline-block;
}

.active:after {
    content: '';
    border: 10px solid transparent;
    border-bottom: 10px solid #9cdb16;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -10px;
}

.circular {
    width: 70px;
    height: 70px;
    border-radius: 35px;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
}