text-align footer HTML CSS - html

Question

I got a question:
I want my text "left" to go left and my text "right" to go right and want them both on the same line.
I have added a text-align in CSS but it doesnt work. I have also added a display:inline-block so the 2 different divs can be on the same line. I also want to add a margin between the border of the website and the text. I tried width:90% in CSS but then the text is on the same line anymore.
My Problem
Here is my HMTL code
<div class="footer">
<div class="footerleft">
<p>Left1</p>
<p>Left2</p>
<p>Left3</p>
</div>
<div class="footerright">
<p>RIght1</p>
<p>RIght2</p>
<p>RIght3</p>
</div>
</div>
Here is my CSS code:
.footer {
position:absolute;
left: 0;
bottom: 0;
width: 100%;
background-color: #160a70;
color: white;
}
.footerright {
text-align: left;
display: inline-block;
}
.footerleft {
text-align: right;
display: inline-block;
}

Answer 1

text-align won't have any effect in your case because the parent width is the width of child content since you set display:inline-block. The text is already close to both edges.
The simpliest solution in this case is to use float and simply add padding to main container to create the space between border. Also change width:100% with right:0 to avoid overflow:
.footer {
position: absolute;
left: 0;
bottom: 0;
right:0;
background-color: #160a70;
color: white;
padding:20px; /* For spacing */
}
.footerright {
float: right;
display: inline-block;
}
.footerleft {
display: inline-block;
}
<div class="footer">
<div class="footerleft">
<p>Left1</p>
<p>Left2</p>
<p>Left3</p>
</div>
<div class="footerright">
<p>RIght1</p>
<p>RIght2</p>
<p>RIght3</p>
</div>
</div>
Or consider the use of flex which is better:
.footer {
position: absolute;
left: 0;
bottom: 0;
right:0;
padding:20px;
background-color: #160a70;
color: white;
display:flex;
}
.footerright {
text-align: right;
flex:1;
}
.footerleft {
text-align: left;
flex:1;
}
<div class="footer">
<div class="footerleft">
<p>Left1</p>
<p>Left2</p>
<p>Left3</p>
</div>
<div class="footerright">
<p>RIght1</p>
<p>RIght2</p>
<p>RIght3</p>
</div>
</div>
Or add width to your element and don't forget to clear the whitespace:
.footer {
position: absolute;
left: 0;
bottom: 0;
right:0;
padding:20px;
background-color: #160a70;
color: white;
display: inline-block;
font-size: 0;
}
.footerright {
font-size: initial;
text-align: right;
width: 50%;
display: inline-block;
}
.footerleft {
font-size: initial;
text-align: left;
width: 50%;
display: inline-block;
}
<div class="footer">
<div class="footerleft">
<p>Left1</p>
<p>Left2</p>
<p>Left3</p>
</div>
<div class="footerright">
<p>RIght1</p>
<p>RIght2</p>
<p>RIght3</p>
</div>
</div>