'<ul> <li> lining problem for middle content of the body in css

look at the 4th number li [1]]https://i.stack.imgur.com/xCo2M.png

That's the problem in live server after that, I'm trying to do it on my local pc but the same problem which im showing in the following picture

Another Example in local pc. https://i.stack.imgur.com/DgbsQ.png

fully code I'm going to give you. you can try it on your PC and please tell me why it's doing like that. I need it very fast

.psot_flw_ul{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding-right: 51vw;
    margin-bottom: 2.56vw;
    padding-top: 0vw;
    padding-left: 2.6vw;
}
.psot_flw_ul li{
    width: 50%;
    display: inline-block;
    line-height: 2.3;
}
.psot_flw_ul li a{
    line-height: 1.3!important;
    display: inline-block;
    font-family: 'Arimo'!important;
    color: #000000!important;
    position: relative;
    font-size: 1vw;
    letter-spacing: 0.05vw;
    text-decoration: underline;
}
.psot_flw_ul li a span{
    width: 2vw;
    /* background-color: red; */
    height: 1.5vw;
    position: absolute;
    left: -3vw;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block;
}
.psot_flw_ul li:nth-child(1){}
.psot_flw_ul li:nth-child(1) a{}
.psot_flw_ul li:nth-child(1) a span{
    background-image: url(bu-image/instragram.png);
}
.psot_flw_ul li:nth-child(2){
}
.psot_flw_ul li:nth-child(2)a{}
.psot_flw_ul li:nth-child(2) a span{
    background-image: url(bu-image/microphone_icon.png);
}
.psot_flw_ul li:nth-child(3){}
.psot_flw_ul li:nth-child(3) a{}
.psot_flw_ul li:nth-child(3) a span{
    background-image: url(bu-image/word_icon.png);
}
.psot_flw_ul li:nth-child(4){}
.psot_flw_ul li:nth-child(4) a{}
.psot_flw_ul li:nth-child(4) a span{
    background-image: url(bu-image/book_icon.png);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h4>Follow Lila:</h4>
    <ul class="psot_flw_ul">
        <li><a href="#"><span></span>@horizontalwithlila </a></li>
        <li><a href="#"><span></span>horizontalwithlila.com </a></li>
        <li><a href="#"><span></span>horizontalwithlila.com </a></li>
        <li><a href="#"><span></span>Mating in Captivity <br>Arousal <br>Sex at Dawn <br>Reid’s Safer Sex Elevator Speech</a></li>
    </ul>
    <h4>Connect with Alexa:</h4>

    <ul class="psot_cnt_ul">
        <li><a href="#"><span></span>@thatsexchick </a></li>
        <li><a href="#"><span></span>thatsexchick.com </a></li>
    </ul>
</body>
</html>

This is the full code of that example. please let me know as soon as possible Thanks a lot :) :) [1]: https://i.stack.imgur.com/xCo2M.png [2]: https://i.stack.imgur.com/DgbsQ.png

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'<ul> <li> lining problem for middle content of the body in css

Sources

Related Questions