Я создаю демонстрационный портфель (все еще в начальной стадии), используя html и CSS. У меня проблема с полями navbar со всех сторон, хотя я установил глобальное поле на 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;
}