My attempt to style GitHub card using flex-box model

code.css

* {
    margin: 0;
    padding: 0;
    font-family:"Source Sans Pro",Helvetica,Arial,sans-serif;
    color: #444444
}

.horizontal {
    display: flex;
    flex-direction: row;
    justify-content: center;
}
.vertical {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.github-card {
    align-self: center;
}

body {
    width: 100%;
}

code.html

<div class="horizontal" id="div_top_content">
  <div id="div_user_card">
      <div class="github-card" data-github="bgr360" data-width="400"
           data-height="150" data-theme="default"></div>
      <script src="https://cdn.jsdelivr.net/github-cards/latest/widget.js"></script>
  </div>

  <a id="link_xkcd" href="http://xkcd.com/221/">
      <img src="http://imgs.xkcd.com/comics/random_number.png"/>
  </a>

  <img id="img_pie_chart"
       src="https://raw.githubusercontent.com/BGR360/RepoLanguageAnalyzer/master/charts/bgr360.png"/>
</div>