Fixed reputation wrap issue and added hover color to left menu

In this 4th development contribution report I want to show two issues that I fixed for Busy.org website.

<h3>Reputation wrap issue: <p dir="auto"><br /><span>Pull request: <a href="https://github.com/busyorg/busy/pull/1016" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/busyorg/busy/pull/1016<span> Fixes Issue: <a href="https://github.com/busyorg/busy/issues/842" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/busyorg/busy/issues/842 <p dir="auto"><img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1510596243/kvjkjnshx98kl9yaxzvh.png" alt="busy-pull-1016.png" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1510596243/kvjkjnshx98kl9yaxzvh.png 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1510596243/kvjkjnshx98kl9yaxzvh.png 2x" /> <p dir="auto">Changes I made: <ul> <li>made <code>.UserHeader__user to have <code>margin: 0 !important; on small screens. This margin has no relevance on small screens, since the text is center aligned and has no elements on the sides.<br /> decreased font size for <code>.UserHeader__user__username to 28px on small screens <h5>Observations: <p dir="auto">The <code>!important was necessary because some media queries were defined before normal style in <code>UserHeader.less. Normally media queries are defined after the normal style(non-media). In the present case the normal style would override the media queries, therefore !important was needed. <hr /> <h3>Added hover color for left nav <p dir="auto"><br /><span>Pull request:<a href="https://github.com/busyorg/busy/pull/1019" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/busyorg/busy/pull/1019<span> Issue: <a href="https://github.com/busyorg/busy/issues/950" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">https://github.com/busyorg/busy/issues/950 <p dir="auto"><img src="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1510596261/xrgwswesm0g0jwsurowl.png" alt="busy-pull-1019.png" srcset="https://images.hive.blog/768x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1510596261/xrgwswesm0g0jwsurowl.png 1x, https://images.hive.blog/1536x0/https://res.cloudinary.com/hpiynhbhq/image/upload/v1510596261/xrgwswesm0g0jwsurowl.png 2x" /> <p dir="auto">Changes I made: <ul> <li>the left menu (<code>.Sidenav) link color changes on hover. <code>@purple is set as color for <code>.Sidenav>li>a:hover <p dir="auto"><br /><hr /><em>Open Source Contribution posted via <a href="https://utopian.io/utopian-io/@sirrius/fixed-reputation-wrap-issue-and-added-hover-color-to-left-menu" target="_blank" rel="noreferrer noopener" title="This link will take you away from hive.blog" class="external_link">Utopian.io<hr /><p>