As I construct the sidebar, I have successfully moved the image to the far right of the screen using
style="text-align: right;"Now that the image is in the correct position, I aim to align the red bar to match its positioning.
https://i.sstatic.net/pwYww.png
My requirement is:
(both the blue bar and red image need to be aligned on the extreme right side of the screen. While the red image is correctly aligned, the blue bar needs adjustment)
https://i.sstatic.net/FI6kc.png
How can I achieve this?
.bar {
background-color: blue;
font-size: 11px;
color: white;
padding-left: 2px;
width: auto;
}<!doctype html>
<html lang="en>
<head>
<!-- Boostrap Files -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6f0d00001b1c1b1d1b0e1b0e1f2f5a415c415f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ea8885859e999e998b9a8b9aaadfc4d9c4da">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="col-md-4 col-lg-4 d-flex flex-column">
<div id="pub" style="text-align: right;">
<div style="text-align: center" class="bar">My Bar</div>
<img src="https://i.postimg.cc/d32tkpdw/ddddddddfdfdfdf.png" alt="aaa">
</div>
</div>
</body>
</html>