So for 3 days all I've been trying to do is have:

* 3 images shaped into circles
	+ sitting aligned horizontally, equal distance apart
	+ taking up central 70% of the screen
	+ where all heights and widths are based on `%` (so they adjust with resizing of the browsers)

It seems like such a simple task, but after 3 days and asking multiple questions, I'm getting nowhere. Please, can someone write me a code to achieve this? 

If it helps, I have this circle code so far: 

Thanks if you can help me 

(I am new to coding) 

```html
<!DOCTYPE html>
<html>
<head>

  <link rel="stylesheet" href="styles.css">
   <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
  <style>
  body{
   width: 100%;
   height: 100%;
  }
/*Parallax*/

.parallax{
    background-image: url("bg.jpg");
    height: 540px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    margin: 0;
    position:relative;
}
/*Parallax*/

#header{
 position: absolute;
  top: 40%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
 left: 20%;
  font-size: 4vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 15px;
  padding-bottom: 20px;
  background-color: #357eca;
  width: 50%;
  word-wrap: break-word;
  opacity: 0.9;
  font-weight: 900;
  padding-left: 5%;
  padding-right: 5%;

}

h5
{   
  color:white; 
  text-align: center;
    font-family: 'Montserrat';
      text-transform: uppercase;
      font-weight: 900;

  /*-webkit-margin-before:0.67em;
  -webkit-margin-after:0.67em;
  -webkit-margin-start:0px;
  -webkit-margin-end:0px;
  -webkit-tap-highlight-colour:rgba(0,0,0,0);
  -webkit-font-smoothing:antialiased;
  -webkit-box-direction:normal;
  position: absolute;*/
}
h5:after, h5:before
{
  content: '';
  width: 50px;
  height: 2px;
  background: black;
  margin: 0 10px;
}
/*--- Circular images --- */

.img-circular1,
.img-circular2,
.img-circular3 {
  width: 100%;
  height: 100%;
  background-size: cover;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  background: red;
  display: block;
  margin: 0 auto;
}

.img-circular1 {
  background-image: url('/Images/learn.jpg');
}

.img-circular2 {
  background-image: url('/Images/watch.jpg');
}

.img-circular3 {
  background-image: url('/Images/practice.jpg');
}

#container1 {
  top: 100px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  margin-top: auto;
  width: 70%;
  background-color: green;
  overflow: auto;
  bottom: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
    flex-grow: 1;
      height: 50vh;
  justify-content: space-around;
}

.wrap {

width: 30%;
  height:50%;
}

.flex {
  height: 50vh;
  display: flex;
  justify-content: space-around;
}

.flex > div {
  flex: 0 0 23%;
}
</style>
</head>
<body>
<div id="navigation"></div>

<div class="parallax"><h5 id="header"><b>Welcome to RyanTeaches</b></h5></div>

<!--<img src="bg.jpg" style="top:60px;height: 510px;min-width: 100%;">-->
<div id="content">
<h2 style="margin-top: 0px;">Activities</h2>
</div>
<div id="container1">
<div class="wrap">
    <div class="img-circular1"></div>
    </div>
    <div class="wrap">
    <div class="img-circular2"></div>
    </div>
    <div class="wrap">
    <div class="img-circular3"></div>
    </div>
</div>

<div id="content" style="margin-top: 100px;">
<p style="padding-bottom: 300px;">Helllllloooooooooo</p>

</div>

<script src="nav.js"></script>
<script src="template.js"></script>
</body>
</html>
```