display inline doesnt work but display flex does : so i am able to get a horizontal nav bar one way but not the other and i am getting confused as to why. strange things happen when i use float left as well so im not sure if ive got my elements labelled in the best format. the relevant html and css are below:

     <nav class="main-nav">
                
                
            <ul class="navtext">
                <li><a href="index.html">Index</a></li>
                <li><a href="p2.html">P2</a></li>
                <li><a href="p3.html">P3</a></li>
            </ul>
                
            </nav>   

    .main-nav{
     
        padding-top: 0px; 
    padding-bottom: 0px; 
    padding-left: 60px; 
    padding-right: 60px; 
        background-image: url("images/navimage.jpg");
        text-align: center;
        border: solid 10px black;
		font-size: 20px;
		text-shadow:
		-1px -1px 0 #000,
		1px -1px 0 #000,
		-1px 1px 0 #000,
		1px 1px 0 #000; 
    

    .navtext{ list-style: none;
        padding: 3rem;
        margin: none;
        display: flex;}

ive tried doing the whole nav as main-nav but then list style: none has no effect

    
            
        





