styles.css

/* Your Code Here! */

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,600");

:root {
  --primary: #396dff;
  --grey: #f7f7f7;
  --white: #fff;

  --xs: 4px;
  --s: 8px;
  --m: 16px;
  --l: 24px;
}

body {
  margin: 0;
  font-family: "Open Sans", sans-serif;
}

.u-textCenter {
  text-align: center;
}

.navContainer {
  padding: var(--s) var(--m);
  background-color: var(--primary);
}

.navTitle {
  color: var(--white);
  font-size: 20px;
}

.avatarContainer {
  padding: 0 35%;
}

.avatar {
  /* make it responsive */
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
  /* div height to be the same as width*/
  padding-top: 100%;

  /* make it a circle */
  border-radius: 50%;

  /* Add image */
  background-image: url("corgi.jpg");

  /* Centering on image`s center*/
  background-position-y: center;
  background-position-x: center;
  background-repeat: no-repeat;

  /* it makes the clue thing, takes smaller dimension to fill div */
  background-size: cover;

  /* it is optional, for making this div centered in parent*/
  margin: 0 auto;
}

.flex {
    display: flex;
    flex-direction: row;
}

.flex-equal {
    flex-basis: 0;
    flex-grow: 1;
}