MrColdCoffee

HTML:

<div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>      
    </ul>
</div>

Css для второй строки:

div{
    width:100%;  
}
ul{  
    padding:0;
    margin:0;
    width:100%;
    text-align:right;
}
li{
    width:50px;
    height:50px;    
    margin:20px 5px;
    padding:5px;
    text-align:center;   
    list-style:none;  
    display:inline-block;
    font-size:25px;  
    line-height:50px;
    font-weight:500;
    background:#fc9090;
    color:#FFF;
  font-family:sans-serif;
}
li:nth-child(1){
  width:100px;
  height:100px;
  float:left;
  line-height:100px;
  font-size:50px;
}

css для третьей строки:

div{
    width:100%;  
}
ul{  
    padding:0;
    margin:0;
    width:100%;
    text-align:right;
}
li{
    width:100px;
    height:100px;    
    margin:20px 5px;
    padding:5px;
    text-align:center;   
    list-style:none;  
    display:inline-block;
    line-height:100px;
    font-size:50px;
    font-weight:500;
    background:#fc9090;
    color:#FFF;
    font-family:sans-serif;
}
li:nth-child(1),li:nth-child(2){
  float:left;
}
li:nth-child(5){
display:none;
}

у body margin:0;

<div class="circle" ></div>

.circle{
  width: 30px;
  height: 30px;
  border-radius: 20px;
  background-color: #000;
  border: 5px solid #FFF;
  outline: 5px solid green;
}

body{
   overflow-x: hidden;
   margin: 0;
}

.element {
  height: 70px;
  width: 270px;
  border-radius: 15px;
  margin-top: 10px;
  background-color: red;
  transform: translateX(-100%);
  animation: nudge 5s linear;
}

.element:nth-child(2){
    -webkit-animation-delay: 5s;
    -moz-animation-delay: 5s;
    -o-animation-delay: 5s;
    animation-delay: 5s;
}
.element:nth-child(3){
    -webkit-animation-delay: 10s;
    -moz-animation-delay: 10s;
    -o-animation-delay: 10s;
    animation-delay: 10s;
}

@keyframes nudge {
  100% { transform: translateX(100vw); }
}

У Вас #connect_phrase и #celebrity_phrase имеют position: relative; и отрицательный right
замените на left с положительным (вместо right:-250px; -> left:250px; )

переместите <style> в head или body, а то у Вас где-то между
уберите required у input type="submit"

в css:
#link_1:hover {
text-decoration-line: underline;
text-decoration-thickness: ???
cursor: pointer;
}

тык

html

<div class="wrapper">

  <div class="left-block">
    1
  </div>
  
  <div class="right-block">
    2
  </div>

</div>

css

*{
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	margin:0;
	padding:0;	
}
.wrapper{
  display: table;
  width: 100%;
  min-height:100vh;
  height:100%;
}
.left-block,.right-block{
  display: inline-block;
  min-height:100%;  
}
.left-block{width: 68%;background:green;}
.right-block{width: 32%;background:red;}

вот тут хороший пример