Fixed up the css

src/components/pedestrian.js

@@ -1,21 +1,32 @@
 import React from "react";
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 
-import Person from '../states/person'
+import Person from "../states/person";
 
-export default function Pedestrian ({ pedestrian }) {
-  if (pedestrian.activity.isWalking) {
-    return <img className="pedestrian" src="https://media.giphy.com/media/QpWDP1YMziaQw/giphy.gif" alt="walking" />;
-  }
-  if (pedestrian.activity.isStanding) {
-    return <img className="pedestrian" src="https://media.giphy.com/media/ghhynvHS4NbDG/giphy.gif" alt="standing"  />;
-  }
-  if (pedestrian.activity.isRunning) {
-    return <img className="pedestrian" src="https://media.giphy.com/media/7kn27lnYSAE9O/giphy.gif" alt="running" />;
-  }
-  return null;
+export default function Pedestrian({ pedestrian: { activity } }) {
+
+  let id = activity.isWalking
+    ? "QpWDP1YMziaQw"
+    : activity.isStanding
+    ? "ghhynvHS4NbDG"
+    : activity.isRunning
+    ? "3D0tSwNjVK56z6okJp"
+    : null;
+
+  return (
+    <div
+      className="pedestrian"
+      style={{
+        margin: "40px",
+        backgroundPosition: "0 0",
+        backgroundSize: "contain",
+        backgroundImage: `url(https://media.giphy.com/media/${id}/giphy.gif)`,
+        backgroundRepeat: "no-repeat"
+      }}
+    />
+  );
 }
 
 Pedestrian.propTypes = {
   pedestrian: PropTypes.instanceOf(Person)
-}
+};

src/index.js

@@ -24,14 +24,14 @@ class App extends React.Component {
     let intersection = this.state.$;
 
     return (
-      <div>
+      <>
         <Interval enabled timeout={1000} callback={intersection.tick} />
-        <TrafficLight light={intersection.light} />
-        <Pedestrian pedestrian={intersection.pedestrian} />
-        <div className="footer">
-          timer: {intersection.light.timer.state}
-        </div>
-      </div>
+        <main>
+          <TrafficLight light={intersection.light} />
+          <Pedestrian pedestrian={intersection.pedestrian} />
+        </main>
+        <footer>Time left: {intersection.light.timer.state}</footer>{" "}
+      </>
     );
   }
 }

src/style.css

@@ -1,13 +1,41 @@
 html {
   background: linear-gradient(#08f, #fff);
-  padding: 40px;
-  height: 100%;
   margin: 0 auto;
 }
 
+body {
+  height: 100vh;
+  margin: 0;
+}
+
+#root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+main {
+  display: flex;
+  flex-grow: 1;
+}
+
+.pedestrian {
+  display: flex;
+  flex-grow: 1;
+  padding: 40px;
+}
+
+footer {
+  display: flex;
+  flex-grow: initial;
+  font-size: 24px;
+  font-weight: bold;
+  font-family: sans-serif;
+  padding: 40px 60px 40px 300px;
+}
+
 .trafficlight {
-  float: left;
-  margin-right: 50px;
+  margin: 40px;
   background: #222;
   background-image: linear-gradient(
     transparent 2%,
@@ -20,6 +48,7 @@ html {
   border-radius: 20px;
   position: relative;
   border: solid 5px #333;
+  display: flex;
 }
 
 .trafficlight:before {
@@ -106,11 +135,9 @@ html {
 }
 
 .yellow.is-active {
-  background: yellow;  
+  background: yellow;
 }
 
-
-
 .green {
   background-image: radial-gradient(lime, transparent);
   background-size: 5px 5px;
@@ -129,26 +156,16 @@ html {
 }
 
 .is-blinking {
-  animation: 1.5s blinking infinite;  
+  animation: 1.5s blinking infinite;
 }
 
 @keyframes blinking {
-  50%, 100% {
+  50%,
+  100% {
     opacity: 0.1;
   }
-  0%, 49% {
+  0%,
+  49% {
     opacity: 1;
   }
 }
-
-.pedestrian {
-  position: relative;
-  float: left;
-  min-height: 650px;
-}
-
-.footer {
-  position: absolute;
-  bottom: 10px;
-  left: 10px;
-}