Sidste <li> laver linjeskift

Jeg kan ikke genskabe dit problem, da mine inline elementer står som de skal efter hinanden.

Selv har jeg gjort følgende.

ul{
               
}
           
ul li{
display: inline;
border: 1px dashed black;
margin: 0px 40px;
}

<ul>
<li>Punkt 1</li>
<li>Punkt 2</li>
<li>Punkt 3</li>
<li>Punkt 4</li>
</ul>

Ved ikke om det er med vilje, men du skal huske at lukke dine <li> elementer.

Problemet kommer, når jeg bruger % - i stedet for px, ved margin..

Har jeg heller ikke nogle problemer, udover hvis jeg skubber mit <li> element så langt at det skubbes ned på en ny linje hvis min div er for lille.

Du må smide hele dit script hvis jeg skal kunne hjælpe yderligere.

nogle gange er % lidt dumt, hvis der ikke er en overordnet fast størrelse, den kan regne ud fra.
Prøv fx at sætte body til en fast bredde i px, og se om den så ikke kan regne det ud.
Har du testet med flere browsere?
jeg går ud fra, at "<li>Punkt 1<li>" bare har en glemt / her, og ikke i koden.

Html:
        <header class="mainHeader">
            <nav>
                <ul>
                <li><a href="#">Punkt 1</a></li>
                <li><a href="#">Punkt 2</a></li>
                <li><a href="#">Punkt 3</a></li>
                <li><a href="#">Punkt 4</a></li>
                <li><a href="#">Punkt 5</a></li>
                <li><a href="#">Punkt 6</a></li>
                </ul>
            </nav>
        </header>

CSS :
*{
    margin: 0 auto;
}
a:link, a:visited{
    color: #000;
    text-decoration: none;
}
a:active, a:hover{
    color: #000;
    text-decoration: none;
}
.mainHeader{
    width: 70%;
    height: 60px;
    line-height: 60px;
    background-color: #777;
}
.mainHeader ul{
    list-style-type: none;
    text-align: center;
    float: right;
}
.mainHeader ul li{
    display: inline;
    margin: 0px 0.8%;
}

Jeg havde ikke testet den i andet end Chrome, men har lige prøvet Firefox, og den gør det sammme..

Problemet er at det er til responsivt design.
Så at sætte fast brede på body i px, er ikke være en holdbar løsning..

Ja ok den skulle lige cirkulerer rundt, før det gav mening.

Du laver en header som er 70% af parent. Derefter laver du en ul, og gør den horisontal, men definerer ikke hvor bred den skal være.

Så din header bløder ud over kanten, og du har ikke en overflow regl der gemmer det.

Prøv at indsætte følgende background-color: yellow; i din .mainHeader ul så kan du se det.

Nu ved jeg ikke hvad målet er, men i samme kan du så sige width: 100%;

Og så står det fint. Som sagt ved jeg ikke hvad målet er, men din flow: right; virker overflødig.

Beklager mit meget sene svar.. Tak for hjælpen.. Smid et svar for at få point :)

Jeg lukker :)