I am trying to showcase two div elements inside a navigation bar on the right side of the screen. The issue I'm facing is that when I apply float: right to this particular div
<div _ngcontent-c9="" class=" ng-clock docs-homepage-row menuSup"> <nav _ngcontent-c1="" class=" ng-clock docs-navbar-header menuDate">
<div _ngcontent-c9="" class=" ng-clock docs-homepage-row menuSup">
<div _ngcontent-c9="" class=" ng-clock docs-homepage-promo-img">
...
</div>
<div _ngcontent-c9="" class=" ng-clock docs-homepage-promo-img" >
...
</div>
</div>
</nav>
CSS
.docs-navbar-header[_ngcontent-c1] {
display : flex;
flex-wrap : wrap;
align-items : center;
padding : 12px 16px;
}
.menuDate{
width: 100%;
background: var(--defaultColorDark);
}
.docs-homepage-row[_ngcontent-c9] {
display : flex;
max-width : 920px;
margin : 60px 0;
float: right;
}
.menuSup[_ngcontent-c9] {
display : flex;
width: 100%;
margin : 10px 10px;
float: right;
}
.docs-homepage-row[_ngcontent-c9] .docs-svg-image[_ngcontent-c9] {
max-width : 90%;
}
.docs-homepage-promo-desc[_ngcontent-c9], .docs-homepage-promo-img[_ngcontent-c9] {
width : 50%;
}
.docs-homepage-promo-img[_ngcontent-c9] {
text-align : center;
margin-top: 20px;
}