I'm trying to add text in the top right corner of the screen to use it as a menu over a div that is using flex (the section1div would contain an image irl). However, it keeps staying in the top left corner.
Here's my code.
.section{ height: 100vh; /* 100% of the viewport height */ display: flex; text-align: center; position:relative; }#section1{margin:0;height:100vh;width:100%;}#section2{margin:0;height:100vh;width:100%;}.menu{ position: relative; z-index:3; text-align: right; list-style-type: none; padding:10px; }<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://code.jquery.com/jquery-2.1.4.min.js"></script><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" /></head><body><div class="section" id="section1"><ul class="menu"><li>Sculptures</li><li>Quotes</li><li>Reviews</li></ul></video></div><div id='section2' class="section"><p>section 2</p></div><div id='section3' class='section'><p>section 3<p></div></body></html>I tried using margin-left:auto; but it's not working. Even if I had it in the css it doesn't show when I inspect the element.