Html 父div周围存在无法解释且不需要的空间_Html_Css

Html 父div周围存在无法解释且不需要的空间

html css

Html 父div周围存在无法解释且不需要的空间,html,css,Html,Css,好吧，这是我的问题：我正在尝试建立一个单页的公文包/自由职业者网站[插图画家/平面设计师，只有非常基本的网页设计技能]，稍后将包括一个平滑滚动功能。它在顶部[灰色矩形]包含一个固定导航栏，我有4个不同的部分/div[黑色矩形]，包含在内容父div[红色矩形]中。我一直在想方设法让我的内容父div的宽度达到100%【高度可以，但我不太担心这一点】，但出于某种原因，无论我做什么尝试，周围都有一小块额外的空间【绿色区域】这是我的HTML: <body> <div id="

好吧，这是我的问题：我正在尝试建立一个单页的公文包/自由职业者网站[插图画家/平面设计师，只有非常基本的网页设计技能]，稍后将包括一个平滑滚动功能。它在顶部[灰色矩形]包含一个固定导航栏，我有4个不同的部分/div[黑色矩形]，包含在内容父div[红色矩形]中。我一直在想方设法让我的内容父div的宽度达到100%【高度可以，但我不太担心这一点】，但出于某种原因，无论我做什么尝试，周围都有一小块额外的空间【绿色区域】

这是我的HTML:

<body>
    <div id="main">
        <div class="container clearfix">        
            <div id="navbar">
                <div id="nav-anchor"></div>
                <nav>
                    <ul>
                        <li><a href="#about">About</a></li>
                        <li><a href="#portfolio">Portfolio</a></li>
                        <li><a href="#about"><img src="../ALJUNxMILJUN/version-1.png" height="45px" /></a></li>
                        <li><a href="#services">Services</a></li>
                        <li><a href="#contact">Contact</a></li>
                    </ul>
                </nav>
            </div>
            <div id="content">
                <section id="about">blah blah blah</section>
                <section id="portfolio">blah blah blah</section>
                <section id="services">blah blah blah</section>
                <section id="contact">blah blah blah</section>
            </div>
        </div>
    </div>
</body>

这就是我的代码/css现在的样子，简单到基本。

在某一点上，parent确实有100%的宽度，并进行了拉伸，但后来我做了一些事情，似乎不知道是什么。

Add:html，body{margin:0；}默认页面边距会在@nevermind的注释后面产生很小的额外空间（如果您是指该空间），您应该使用

*{margin:0；padding:0；}

位于样式表顶部，以消除corss浏览器在不同元素上的默认边距/填充问题。谢谢！我知道那个页面有一个默认的边距，但我很困惑，认为这不是因为我在导航方面没有问题……我会确保记住这一点。谢谢@Adam，我会设法解决的

#content {
    width:100%;
    padding:0;
    margin: 52px 0 0 0;
    border: 1px solid red;
}

#about {
    border: 1px solid black;
    height: 760px;
}

#portfolio {
    border: 1px solid black;
    height: 760px;
}

#services {
    border: 1px solid black;
    height: 760px;
}

#contact {
    border: 1px solid black;
    height: 760px;
}