I am having a problem with my webpage that I am in the prosses of making. Here is the W3schools link to what I am trying to make.
There's some sort of border around the edges of my webpage. Here is my CSS code:
#easyBreakfast {
color: #60542d;
font-size: 40px;
}
#head {
background-color: brown;
}
#p1 {
font-size: 20px;
margin: 8px;
}
body, html {
height: 100%;
}
.parallax {
background-image: url("https://i.pinimg.com/originals/4a/67/3b/4a673bea73e5130d5fb58e5904c76465.png");
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#toast {
background-image: url("http://a57.foxnews.com/images.foxnews.com/content/fox-news/food-drink/2017/12/12/internet-is-divided-over-right-way-to-cut-toast/_jcr_content/par/featured_image/media-0.img.jpg/931/524/1513113018403.jpg?ve=1&tl=1&text=big-top-image");
height: 100%;
}
#toast, .parallax {
position: relative;
opacity: 0.65;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
Here is my HTML code regarding this problem:
<h1 id="easyBreakfast">Easy Breakfasts</h1>
<p id="p1">You know when you wake up late in the morning and only have <em>15 minuites</em> to get ready? Sometimes making breakfast can be a <strong>pain.</strong> These recipes are quick and don't need attention while cooking so you can do your other important things while your breakfast is brewing.
</p>
</div>
<div class="parallax"></div>
<h2 class="fooditem"><a href=" ">Toast</a></h2>
<p>Just plain old toast... Spread jam, Peanut butter, Nutella, or any other topping you can think of on top of this simple breakfast. </p>
<button id="toastIng"> Ingredients </button>
<div id="toast"></div>`
I have tried turning outline and border off, but I just can't seem to find a solution.
If you need any more information, just ask. Thanks in advance!
