Untitled

CSS-
h2{font-size: 30px;
  font-family: Lobster;
}

body{background-color:grey;
}

.box{
  border-style: dotted solid double dashed;
  border-width: 5px;
}


.purple-box{
  background-color: purple;
  padding-top: 20px;
  padding-bottom: 0px;
  margin-top:-10px;
  padding-left: 40px;
}

.blue-box{
  background-color: blue;
  text-align: center;
}

img{width: 10%}

ul{
  list-style-type: none;
  margin:0;
  padding:0;
  overflow:hidden;
  background-color:light-purple;
}

li{
  float: right;
}

li a{
  display:block;
  color:white;
  text-align: center;
  padding:14px 16px;
  font-family:Helvetica;
  font-size: 19px;
}


HTML-
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<link rel="stylesheet" href="css/main.css">


<body>
 <div class="container-fluid">

  <h2 class="box purple-box"> Free Code Camp Portfolio
   <ul><li><a href="#contact">Contact</a></li>
   <li><a href="#about">About</a></li>
   <li><a class="active" href="#home">Home</a></li>

  </h2>

    <div class="row">

      <div class="col-sm-2">
      <img
           src="https://i.imgur.com/eAkJaqJ.jpg"
           alt="Me at my school's Logic Lab"
           >
      </div>

      <div class="col-sm-2">
        <img
             src="https://i.imgur.com/Ph6hEuQ.png"
             alt="snowy"
            >

      </div>
        <div class="col-sm-2">
        <img src="https://i.imgur.com/G6C6kAA.png"
             alt="Zeta"
             >
        </div>
    </div>
 </div>
</body>