As a newcomer to CSS, I am seeking assistance with aligning items on a webpage. Essentially, I am trying to achieve an alignment that resembles the following:
Item 1 item 2 item 3
Currently, all the items are sticking to the left side without any repositioning. The CSS and HTML code I have put together is as follows:
.container {
display: flex;
align-items: baseline;
margin-left: 70px;
margin-right: 40%;
background-color: red;
}
.itemOne {
text-align: right;
}
.itemTwo {
display: inline;
font-size: 20px;
font: url('../../public/fonts/Lato-Bold.ttf');
letter-spacing: 0.24px;
text-align: left;
}
.itemThree {
text-align: right;
}<div className={styles.container}>
<div className={styles.itemOne}>itemOne</div>
<div className={styles.itemTwo}>itemTwo</div>
<div className={styles.itemThree}>itemThree</div>
</div>Although the container is set with a display of flex and the size is defined, items 1 and 3 do not align correctly to the end of the container when text-align: right is applied. While adjusting margins can somewhat help in repositioning the items, precise alignment is challenging. Any suggestions or guidance on this matter would be greatly appreciated.