Split a page into 2 sections - php

Question

I currently have the following code.
The circle buttons are basically navigation buttons. The second div is where I have a collapsable list.
I would like to have the list on the right-hand side of the navigation.
I have attempted to wrap the divs and also use float as left, for some reason it is still not working. If someone could assist?
html, body {
background-color: #fff;
color: rgba(255, 43, 62, 0.84);
font-family: 'Raleway', sans-serif;
font-weight: 100;
height: 100vh;
margin: 10px;
}
.links > a {
color: #ffffff;
padding-top: 0;
padding-right: 50px;
padding-left: 50px;
padding-bottom: 100px;
font-size: 14px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
.round-button {
width:8%;
}
.round-button-circle {
width: 100%;
height:0;
padding-bottom: 100%;
margin: 10%;
border-radius: 110%;
border:3px solid #56660d;
overflow:hidden;
background: #abc729;
box-shadow: 0 0 3px gray;
}
.round-button-circle:hover {
background: #56660d;
}
.round-button a {
display:inline-block;
float:left;
width:100%;
padding-top:45%;
padding-bottom:50%;
line-height:1em;
text-align:center;
color: #ffffff;
font-family:Verdana;
font-size:0.70em;
font-weight:bold;
text-decoration:none;
position: relative;
}
<div class="circle-flex-center cirlce-position-ref circle-full-height">
<div class="round-button">
<div class="round-button-circle">
Personal & Placement Details
</div>
</div>
<div class="round-button">
<div class="round-button-circle">
Tutor Details
</div>
</div>
<div class="round-button">
<div class="round-button-circle">
Assignments & Examples
</div>
</div>
<div class="round-button">
<div class="round-button-circle">
Mark Scheme
</div>
</div>
<div class="round-button">
<div class="round-button-circle">
Submission
</div>
</div>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseone" data-toggle="collapse" data-parent="#accordion">
Monthly Reflection
</a>
</h4>
</div>
<div id="collapseone" class="panel-collapse collapse ">
<div class="panel-body">
sjfhdkjs
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapsetwo" data-toggle="collapse" data-parent="#accordion">
Reflection Example
</a>
</h4>
</div>
<div id="collapsetwo" class="panel-collapse collapse">
<div class="panel-body">
adfjkldsf
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapsethree" data-toggle="collapse" data-parent="#accordion">
Tutor Visits
</a>
</h4>
</div>
<div id="collapsethree" class="panel-collapse collapse">
<div class="panel-body">
dilfsklsdgs
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapsefour" data-toggle="collapse" data-parent="#accordion">
Reports
</a>
</h4>
</div>
<div id="collapsefour" class="panel-collapse collapse">
<div class="panel-body">
sfjksdf
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapsefive" data-toggle="collapse" data-parent="#accordion">
Report Example
</a>
</h4>
</div>
<div id="collapsefive" class="panel-collapse collapse">
<div class="panel-body">
difks;ldsf
</div>
</div>
</div>
</div>

Answer 1

A little bit restructured your CSS. I hope that helps.
html, body {
background-color: #fff;
color: rgba(255, 43, 62, 0.84);
font-family: 'Raleway', sans-serif;
font-weight: 100;
height: 100vh;
margin: 10px;
}
.circle-flex-center{
width: 80px;
}
.round-button{
text-align: center;
width: 65px;
height: 65px;
padding: 15px;
margin: 5px;
border:3px solid #56660d;
background-color: #abc729;
border-radius: 110%;
box-shadow: 0 0 3px gray;
float: left;
}
.round-button a{
padding: 5px;
line-height:1em;
color: #ffffff;
font-family:Verdana;
font-size:0.60em;
font-weight:bold;
text-decoration:none;
}
.round-button:hover{
background: #56660d;
}
.panel-group{
float: right;
margin-top: -65%;
}
.links > a {
color: #ffffff;
padding-top: 0;
padding-right: 50px;
padding-left: 50px;
padding-bottom: 100px;
font-size: 14px;
font-weight: 600;
letter-spacing: .1rem;
text-decoration: none;
text-transform: uppercase;
}
<div class="circle-flex-center cirlce-position-ref circle-full-height">
<div class="round-button">
<div class="round-button-circle">
<a href="student-personaldetails" >Personal & Placement Details</a>
</div>
</div>
<div class="round-button">
<div class="round-button-circle">
<a href="student-tutordetails" >Tutor Details</a>
</div>
</div>
<div class="round-button">
<div class="round-button-circle">
<a href="student-placementassignment" >Assignments & Examples</a>
</div>
</div>
<div class="round-button">
<div class="round-button-circle">
<a href="student-markscheme" >Mark Scheme</a>
</div>
</div>
<div class="round-button">
<div class="round-button-circle">
<a href="student-submission" >Submission</a>
</div>
</div>
</div>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapseone" data-toggle="collapse" data-parent="#accordion">
Monthly Reflection
</a>
</h4>
</div>
<div id="collapseone" class="panel-collapse collapse ">
<div class="panel-body">
sjfhdkjs
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapsetwo" data-toggle="collapse" data-parent="#accordion">
Reflection Example
</a>
</h4>
</div>
<div id="collapsetwo" class="panel-collapse collapse">
<div class="panel-body">
adfjkldsf
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapsethree" data-toggle="collapse" data-parent="#accordion">
Tutor Visits
</a>
</h4>
</div>
<div id="collapsethree" class="panel-collapse collapse">
<div class="panel-body">
dilfsklsdgs
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapsefour" data-toggle="collapse" data-parent="#accordion">
Reports
</a>
</h4>
</div>
<div id="collapsefour" class="panel-collapse collapse">
<div class="panel-body">
sfjksdf
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a href="#collapsefive" data-toggle="collapse" data-parent="#accordion">
Report Example
</a>
</h4>
</div>
<div id="collapsefive" class="panel-collapse collapse">
<div class="panel-body">
difks;ldsf
</div>
</div>
</div>
</div>