I recently created a projects page, but I am facing an issue with the iframe embed. Whenever the screen is resized, it keeps shifting to the left. However, what I really want is for it to be centered instead of being on the left side:
https://i.stack.imgur.com/GRWs5.png
.hr {
height: 5px;
width: calc((160vw)/2);
background-color: #181818;
position: relative;
border-width: 0;
}
.video {
width: calc((160vw)/2);
height: calc((90vw)/2);
border : 2px solid;
}<script src='https://kit.fontawesome.com/a076d05399.js' crossorigin='anonymous'></script>
<body class='container'>
<hr class='hr'>
<br class='us'>
<iframe frameBorder="0" class='video' src='https://www.youtube.com/embed/inBBuwcLwH8'></iframe>
<br class='us'>
<hr class='hr'>
</body>I have attempted to add margin to the left, however, it seems to shift to the right when the screen is not resized. Any suggestions or solutions would be greatly appreciated!
Thank you in advance!