Fixed some alignment issues.

src/agent-page/AgentPage.js

@@ -1,7 +1,6 @@
 import React, { Component } from "react";
 import Agents from './Agents'
 import './agent-page.css';
-import Carousel from 'react-bootstrap/Carousel'
 import Agent1 from "../images/Agent1.jpg";
 import Agent2 from "../images/Agent2.jpg";
 import Agent3 from "../images/Agent3.jpg";
@@ -16,7 +15,7 @@ class AgentPage extends Component {
       { title: 'sales assistant', name: 'Jin', src: Agent2, word: 'I have a passion for assisting clients with various real estate needs.', id: 2 },
       { title: 'sales assistant', name: 'Anita', src: Agent3, word: 'Anita looks forward to servicing you to her fullest potential, building long-lasting relationships and making your real estate experience a smooth and memorable one.', id: 3 },
       { title: 'sales assistant', name: 'Alex', src: Agent4, word: 'Since getting licensed in 2010 Alex has consistently been a top producing agent in the GTA', id: 4 },
-      { title: 'sales assistant', name: 'Xuan', src: Agent5, word: 'Xuan grew up in the GTA, and he explored many different neighborhoods in and surrounding Toronto. ', id: 5 },
+      { title: 'sales assistant', name: 'Xuan', src: Agent5, word: 'Xuan grew up in the GTA, and he explored many different neighborhoods in and surrounding Toronto.', id: 5 },
       { title: 'sales assistant', name: 'Walter', src: Agent6, word: 'Walter Henry has always been one to follow his passion. At 13 years old, he started his career as a competitive gymnast.Walter will be certain that you feel informed and at ease throughout the entire process.', id: 6 },
 
 

src/agent-page/Agents.js

@@ -1,5 +1,4 @@
 import React from "react";
-import AgentPage from "./AgentPage";
 /* import {Link} from 'react-router-dom' */
 import Card from "react-bootstrap/Card";
 import Button from "react-bootstrap/Button";
@@ -9,17 +8,19 @@ const Agents = ({ agents }) => {
     return (
       <div className="agent" key={agent.id}>
         {}
-            <Card style={{ width: "22rem", height: "40rem"  }}>
+        <Card style={{ width: "22rem", height: "42rem" }}>
-              <Card.Img variant="top" style={{ height: "22rem" }} src={agent.src} />
+          <Card.Img variant="top" style={{ height: "22rem" }} src={agent.src} />
-              <Card.Body>
+          <Card.Body>
-                <Card.Title>{agent.title}</Card.Title>
+            <Card.Title>{agent.title}</Card.Title>
-                <Card.Text>{agent.name}</Card.Text>
+            <Card.Text>{agent.name}</Card.Text>
-                <Card.Text>
+            <Card.Text style={{ height: "7rem" }}>
-                  {agent.word}
+              {agent.word}
-                </Card.Text>
+            </Card.Text>
-                <Button variant="primary">VIEW</Button>
+            <div className="buttonfriend">
-              </Card.Body>
+              <Button variant="primary">VIEW</Button>
-            </Card>
+            </div>
+          </Card.Body>
+        </Card>
       </div>
     );
   });

src/agent-page/agent-page.css

@@ -20,4 +20,9 @@
 
   .agent{
     padding-left: 16%;
+  }
+  
+  .buttonfriend{
+    padding-top: 15px;
+    padding-left: 120px;
   }

src/listings-page/ListingsPage.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line
 import React, { useState, useEffect, Component } from "react";
 import {
   GoogleMap,

src/listings-page/mapStyles.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line
 export default [
     {
         "featureType": "all",

src/shared-components/navbar-component/Navbar.js

@@ -6,13 +6,13 @@ const Navbar = () => {
   return (
     /* Nav Bar */
     <div className="Navbar">
-      <nav class="navbar navbar-expand-lg navbar-dark">
+      <nav className="navbar navbar-expand-lg navbar-dark">
-        <img src=""></img>
+        <img src="" alt="Logo&emsp;"></img>
-        <a href="/" class="navbar-brand">
+        <a href="/" className="navbar-brand">
           Kene's Cribs
         </a>
         <button
-          class="navbar-toggler"
+          className="navbar-toggler"
           type="button"
           data-toggle="collapse"
           data-target="#navbarTogglerDemo02"
@@ -20,22 +20,22 @@ const Navbar = () => {
           aria-expanded="false"
           aria-label="Toggle navigation"
         >
-          <span class="navbar-toggler-icon"></span>
+          <span className="navbar-toggler-icon"></span>
         </button>
-        <div class="collapse navbar-collapse" id="navbarTogglerDemo02">
+        <div className="collapse navbar-collapse" id="navbarTogglerDemo02">
-          <ul class="navbar-nav ml-auto">
+          <ul className="navbar-nav ml-auto">
-            <li class="nav-item">
+            <li className="nav-item">
-              <Link class="nav-link" exact to="/">
+              <Link className="nav-link" exact to="/">
                 Home
               </Link>
             </li>
-            <li class="nav-item">
+            <li className="nav-item">
-              <Link class="nav-link" to="/listings">
+              <Link className="nav-link" to="/listings">
                 Listings
               </Link>
             </li>
-            <li class="nav-item">
+            <li className="nav-item">
-              <Link class="nav-link" to="/agents">
+              <Link className="nav-link" to="/agents">
                 Agents
               </Link>
             </li>