So, I made this website where you have links under an input. I want the 4 links to be placed under the input like this for example 
.
.q-links { list-style-type: none; display: flex; flex-direction: horizonal; color: rgb(140, 140, 140); .search-bar { border-radius: 50px; border: none; padding: 0.75rem 1rem; /* Adjust padding for better input size */ width: calc(100% - 2rem); /* Use calc() for responsive width */ margin: 0.5rem; /* Adjust margin for spacing */ box-sizing: border-box; /* Include padding in width calculation */ width: 60%; margin-left: -2em; flex-grow: 1; box-shadow: 5px 5px 50px #000000; z-index: 5; }<header class="nav-bar"><img src="Final New RFS Logo 2021-01 (2).png" class="logo" alt="RFS Logo"><div style="margin: 0; padding: 0; display: flex; align-items: center; flex-direction: row; width: auto;"><input class="search-bar" type="text" placeholder="Search Anything at RFS"><ul class="q-links"><li>Students</li><li>Staff</li><li>Parents</li><li>Alumni</li></ul></div>I expected it to have the 4 links under under the input exactly, and not like this
Additionally, I am not sure what HTML to add or remove in order to have all the links below the input, and never rime I did try flexes, ot ended up altering the input shape and bugging it up.