<center>![Develpment-GIF.gif](https://res.cloudinary.com/hpiynhbhq/image/upload/v1510379816/gohp6j2dclrgsu2sjbsg.gif)
<sub>GIF by @deveerei.</sub></center>

Here is a minor but relevant fix on Steemit's User Interface - particularly on a Steemian's blog page. 

As many have noticed, the tabs on the left part:
<center>![1.gif](https://res.cloudinary.com/hpiynhbhq/image/upload/v1510398081/bd2yqq8ibavih7tjolyo.gif)
<sub>Side of content box is defined in red.</sub></center>

Isn't aligned to the tabs on the right part of the page:
<center>![2.gif](https://res.cloudinary.com/hpiynhbhq/image/upload/v1510398096/blqgajpgu9zug8bn3qv7.gif)
<sub>Side of content box is defined in red.</sub></center>

However, it isn't the tabs  that are not aligned. As you can see here, they have the same margins:
<center>![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1510378308/zjwe41rgaf5eoonu7ixy.png)
<sub>Red lines for clearer comparison.</sub></center>

It's actually the content box itself that isn't properly aligned to the center:

<center>![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1510378778/qbd2y3u9crkui53cyita.png)
<sub>Red lines for clearer comparison.</sub></center>

# <center> Before Code Changes </center> <h1>

<center>![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1510378865/lg5gd5cspyambkr2jfut.png)<sub>**Screenshot for Reference.**</sub></center>

# <center> After Code Changes </center> <h1>

<center>![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1510376685/dswpj6wtyxyshaswncyo.png)<sub>**Screenshot for Reference.**</sub></center>

# <center> Comparison </center> <h1>

<center>![1.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1510379196/fksejkdjv7nwgaadahzo.png)<sub>**Screenshot for Reference.**</sub></center>

I used the same sizes of arrows on the left side compared to the arrows on the right side, and as you can clearly see. After changing the codes it makes the page more symmetrical by centering the content box properly. The only thing that needs fixing after this, to make it more symmetrical, is the bright mint green drop shadow to the left.

This code changes not only on the "Blog" tab but it applies across the board - on all content boxes - inside a certain user's profile page, this includes:

- Blog Tab
- Comments Tab
- Replies Tab
- Rewards Tab
>> Curation Rewards Page
>> Author Rewards Page
- Settings Tab

***

# <center> Development Work Record: </center>
### Forked Steemit Condenser:
https://github.com/steemit/condenser

### My Forked Repository:
https://github.com/deveerei/condenser

### Edited elements under Branch/Code Source:
https://github.com/deveerei/condenser/edit/blob/src/app/components/pages/UserProfile.scss
> <sub>([Original Branch/Codes Source](https://github.com/steemit/condenser/blob/master/src/app/components/pages/UserProfile.scss))</sub>

<br>

<code>.UserProfile {
    margin-top: -1.5rem;
}</code>

<code>.UserProfile__tab_content {
    margin-top: 1.5rem;
    **_margin-left: 5%;_**
    **_margin-right: 5%;_**
}</code>

<code>.UserProfile__top-nav {
  background-color: $color-blue-dark;  
  padding: 0;
  .row {
      .columns {
          overflow-x: auto;
      }
  }</code>

### Commited Changes:

Added:
<code>    margin-left: 5%;
    margin-right: 5%;</code>
To <code>.UserProfile__tab_content</code>.

Reason: Fix alignment of content box on screen to middle. Current alignment is off, there's more space on the right side.

**Submitted**:  Commit directly to the <code>blob</code> branch.

### Submit Pull Request for Branch:
https://github.com/deveerei/condenser/tree/blob/src/app/components/pages

<center>![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1510377446/ovfdea2z6pb7mc3vud5s.png)
<sub>**Screenshot for Reference.**</sub></center>

### 1 Commit - 1 Changed File - 2 Additions - 0 Deletions:

<center>![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1510377522/wz0nmpifl2t9ozn3f4nm.png)
<sub>**Screenshot for Reference.**</sub></center>

### Pull Request Sent and Pending:

<center>![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1510377744/rsvr6dtetp0pljhctab8.png)
<sub>**Screenshot for Reference.**</sub></center>

### Waiting for Checks and Review:

<center>![image.png](https://res.cloudinary.com/hpiynhbhq/image/upload/v1510377654/mncjdazfbv9hzs6f8sbl.png)
<sub>**Screenshot for Reference.**</sub></center>

***

Do you see what a few codes does to a whole page? It's pretty hard to make sure everything is properly aligned and it sure is hard to manage a whole website. Kudos to the developers in doing a great job maintaining the website. I hope my contribution is able to help.

# <center> Thank you! </center> <h1>

<br /><hr/><em>Open Source Contribution posted via <a href="https://utopian.io/utopian-io/@deveerei/centering-content-box-steemit-user-pages">Utopian.io</a></em><hr/>