我无法删除“联系我”旁边的不可见空间答案

【问题标题】：I cant remove the invisble space next to "Contact Me"我无法删除“联系我”旁边的不可见空间
【发布时间】：2022-08-13 23:30:15
【问题描述】：

我正在尝试删除“联系我”旁边角落右上角的空间，但我不知道它为什么会在那里。我试着把它推到那里，但它仍然不起作用。我还是新手，正在努力学习。

代码：

body{
    font-family: \'Poppins\', sans-serif;
    margin: 0;
    overflow-y: hidden;
    overflow-x: hidden;
}


section {
    background-color: gray;
}

.hero {
    background-color: #1c1d25;
    height: 100vh;
    color: white;
    font-size: 40px;
}



nav {
    display: flex;
    justify-content: space-between;
}

ul {
    display: flex;
    list-style-type: none;
    width: 500px;
    justify-content: space-around;
    font-size: 20px;
}


li {
    text-decoration: none;
}

h1 {
    font-size: 90px;
    margin: 0;
}

p{
    margin: 0;
    font-size: 30px;
    font-weight: 300;
}


.logo {
    height: 100px;
    margin: 30px;
}


.home {
    text-decoration: none;
    color: white;
}

.myw {
    text-decoration: none;
    color: white;
}

.cm {
    text-decoration: none;
    color: white;
}


.logo2{
    width: 400px;
    position: relative;
    margin-top: 200px;
    margin-left: -200px;
    border: 5px dotted purple;
}


p {
    display: flex;
    font-family: \'Poppins\', sans-serif;
    font-size: 1.5vw;
     position: absolute;
     left: 40vw;
     bottom: 40vh;
    width:50%;
}

<!DOCTYPE html>
<html>

<head>
    <link rel=\"stylesheet\" href=\"src/aboutMeStyle.css\" />
    <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">
    <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>
    <link href=\"https://fonts.googleapis.com/css2?family=Acme&family=Poppins&display=swap\" rel=\"stylesheet\">
    <title>About Me</title>
    <meta charset=\"UTF-8\">
</head>

<body>
    <section class=\"hero\">
        <nav>
            <img class=\"logo\" src=\"images/pack.png\" alt=\"Futsunohitos Logo\">
            <img class=\"logo2\" src=\"images/32x_ava.png\" alt=\"Futsunohitos Logo\">
            <div></div>
            <ul>
                <li><a href=\"file:///C:/Users/tttei/OneDrive/Desktop/website/index.html\" class=\"home\"> Home </a></li>
                <li><a href=\"file:///C:/Users/tttei/OneDrive/Desktop/website/index.html\" class=\"myw\"> My Work </a></li>
                <li><a href=\"file:///C:/Users/tttei/OneDrive/Desktop/website/index.html\" class=\"cm\"> Contact Me </a></li>
            </ul>
            <div class= \"glow\">
            <p class=\"Description\">Hello Im Oleg. Im 18 years old. I like to draw and make cool art. I take orders and can make you a custom avatar or anything you ask for. Ofcourse its gonna be really cheap I just want to start my own little business. I hope you enjoy my art (and maybe hire me). Have a great day!</p>
            </div>
        </nav>
            <script>
                \"src/app.js\"
            </script>
        
</body>

</html>

还添加 HTML 代码，而不仅仅是 CSS
@Gurgolo 完成：0

标签： html css

【解决方案1】：

您在 flex ul 上有 justify-content: space-around;，它在 flex 项目周围留出了一些空间。

justify-content: space-between 可能是您正在寻找的东西。

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

【讨论】：

我厌倦了将其更改为您推荐的内容，但遗憾的是它没有用。似乎它下面的文本就像一条看不见的线，不允许它越过它。