I have a div with 2 different divs in it. Each of these 3 have a picture in (60%) of the width and some text in them (40%) however it isn't lining up at all. The text is in the right place and the pictures are in the right organization but they are too far down the page. I'm newish to CSS and I don't know how to fix this
Here's a picture of what it looks like
HTML:
<div class="section 1">
<p id="section1text">
<b>ME</b><br>Hello! My name is Max Jordan. I am a student living in the UK currently doing A-Levels in Maths, Engineering, Physics and computer science. I then want to do a degree in computer science and work as a Software Engineer/Developer. I currently live in Nottingham in the UK. I love programming and creating elegant soloutions for problems.
</p>
<img src="section1.jpg" id="section1pic">
</div>
<div class="section 2">
<p id="section2text">
<b>WORK</b><br>
</p>
<img src="section2.jpg" id="section2pic">
</div>
<div class="section 3">
<p id="section3text">
</p>
<img src="section3.jpg" id="section3pic">
</div>
CSS:
.aboutSection{
width: 100%;
height:100%;
}
.section{
text-align: center;
display: inline-block;
width: 90%;
height: 20%;
margin-left: 5%;
}
#section1text{
float: left;
display: inline-block;
height: 100%;
width:40%;
background-color: #3399ff;
color: white;
font-size: 20;
padding: 10px;
}
#section2text{
float: right;
height: 100%;
width:40%;
float: right;
background-color: #3399ff;
color: white;
font-size: 20;
display: inline-block;
padding: 10px;
}
#section3text{
float: left;
height: 100%;
width:40%;
background-color: #3399ff;
color: white;
font-size: 20;
display: inline-block;
padding: 10px;
}
#section1pic{
float: right;
position:relative;
display: inline-block;
height: 100%;
width: 60%;
}
#section2pic{
float: left;
position:relative;
display: inline-block;
height: 100%;
width: 60%;
}
#section3pic{
float: right;
position:relative;
display: inline-block;
height: 100%;
width: 60%;
}
I know the CSS is very bad but im just trying to get it working.