我正在使用 html 和 CSS 创建一个演示作品集（仍处于最初阶段）。尽管我已在样式表上将全局边距设置为 0，但我的导航栏各边都有边距，但我遇到了问题。我的目标是让导航栏跨越视口的宽度，周围没有边距（底部除外）。我以前没有遇到过这个问题，因此非常感谢您的任何建议！
我的HTML：
<!DOCTYPE html>
<html>
<head>
<link rel="stylsheet" type="text/css" href="Personal Portfolio Stylsheet.css">
<title>Personal Portfolio</title>
</head>
<header>
<nav id="navbar">
<ul type="none">
<li href="#About">About</li>
<li href='#Work'>Work</li>
<li href='#Contact'>Contact</li>
</ul>
</nav>
</header>
<body>
<section id="welcome-section">
<h1>Liam McBride</h1>
<h2><i>Web Developer</i></h2>
</section>
<section id="projects">
<h1>Portfolio</h1>
</section>
<section id="contact-info">
<h1>Reach out to me at any of the following links:</h1>
</section>
</body>
</html>
和CSS：
@import url('https://fonts.googleapis.com/css?family=EB+Garamond|Roboto&display=swap')
/* To call fonts, use the following:
font-family: 'EB Garamond', serif;
font-family: 'Roboto', sans-serif; */
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Box sizing border box means that padding and border width are included in the total width for all elements. */
:root {
--color-off-white: #fff6f6;
--color-aluminum: #c4c4c4;
--color-charcoal: #494646;
--color-black: #1f1919;
--color-navy: #6385b1;
--color-deep-water: #1a3861;
}
#navbar{
width: 100%;
background-color: var(--color-navy);
border-bottom: 0.1em solid;
margin: 0 0 1em 0;
}
nav>ul {
font-family: 'EB Garamond', serif;
font-weight: bold;
font-size:1.15em;
display: flex;
justify-content: space-around;
padding: 0.5em 0.7em 0.1em 50em;
}
header {
position: relative;
padding: 0;
}
潇潇雨雨
相关分类