I'm relatively inexperienced with CSS and HTML and I'm attempting to create a website layout with some white space surrounding it, similar to a border. I have come across many solutions on removing white space, but none on how to add it.
Currently, when I adjust the width, the right side of the element shrinks and fails to expand with the page.
If I use the margin property, only the left side of the element goes inside the page.
Any assistance on this matter would be greatly appreciated.
Below is my code:
HTML -
*, *::before, *::after {box-sizing: border-box;}
* {
margin: 0;
padding: 0;
}
#heading {
width: min(90%, 70.5rem);
z-index: 1;
width:90%;
}
.nav-list {
position:fixed;
width: 100%;
display: flex;
padding: 10px 10px;
margin: 0 auto;
justify-content: flex-end;
align-items: center;
box-shadow: 0px 0px 10px gainsboro;
background-color:blanchedalmond;
}
.nav-item{
list-style: none;
padding: 10px;
margin-right: 50px;
font-family: Arial, Helvetica, sans-serif;
}
.nav-item a {
text-decoration: none;
color: black;
overflow:hidden;
}
.nav-item:first-child{
margin-right: auto;
}
#imgcontainer {
overflow:hidden;
}
#bannerimg {
box-sizing: border-box;
width: 100%;
max-width: 100%;
max-height: 10%;
}
.intro{
display:grid;
grid-template-columns: 70% 30%;
grid-column-gap: 10px;
grid-row-gap: 10px;
}
.intro > div{
background-color: grey;
font-family: Arial, Helvetica, sans-serif;
padding: 1em;
}
.intro > div:nth-child(odd){
background: #ddd
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header>
<div id="heading">
<navbar>
<ul class="nav-list">
<li class="nav-item">
<h1>Rad Cafe</h1>
</li>
<li class="nav-item">
<a href="./index.html">Home</a>
</li>
<li class="nav-item">
<a href="./about.html">About</a>
</li>
<li class="nav-item">
<a href="./store.html">Store</a>
</li>
</ul>
</navbar>
</div>
</header>
<div id="imgcontainer" class="container">
<img id="bannerimg" src="./images/pexels-maria-orlova-4906513.jpg" alt="cafe">
</div>
<section class="intro">
<div id="intro-grid-1" class="grid">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus deserunt obcaecati velit facilis a.
Facere consequatur eaque beatae repellendus dicta! Maiores nulla recusandae fugit,
nam illum soluta eius enim tenetur autem quia cupiditate ipsam tempora maxime tempore quos et veniam voluptatibus illo.
Ratione cum sit, quia, beatae,
minima sequi dolorem numquam ullam quidem incidunt quasi doloribus soluta vitae fugit amet quam suscipit repellendus delectus natus laudantium! Dolores,
quisquam maxime maiores reprehenderit optio at, voluptates aut provident est perferendis laborum rem!
</div>
<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil magni odit, id corporis dicta a,
inventore impedit quae neque obcaecati nulla itaque saepe quod dolorum. Ducimus nam iusto in nemo.
</div>
<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil magni odit, id corporis dicta a,
inventore impedit quae neque obcaecati nulla itaque saepe quod dolorum. Ducimus nam iusto in nemo.
</div>
<div>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil magni odit, id corporis dicta a,
inventore impedit quae neque obcaecati nulla itaque saepe quod dolorum. Ducimus nam iusto in nemo.
</div>
</section>
</body>
</html>