Why is there a margin round my page?

1

Hi,

I wonder if anyone can help with my newb question? For some reason my page has a border all around it and I can’t figure out why?

Here is my HTML:

<!DOCTYPE HTML>
<html lang="en_UK">
  <head>
    <!--This sets up the unicode coding -->
    <meta charset="utf-8">
    <!--For responsive websistes, page opens and device width and not zoomed-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/styles.css">
      <title>Blebz Webdesign</title>
  <body>
    <nav id="navbar">
      <p>This is the navbar section</p>
    </nav>

<div id="container">

  <div id="welcome-section">
      <h1>Welcom to the Blebosphere</h1>
  </div>
    <div id="projects">
      <div class="project-tile"><h2>My projects</h2></div>
      <div class="project-tile"><h2>My projects</h2></div>
      <div class="project-tile"><h2>My projects</h2></div>
      <div class="project-tile"><h2>My projects</h2></div>
      <div class="project-tile"><h2>My projects</h2></div>
      <div class="project-tile"><h2>My projects</h2></div>
      <div class="project-tile"><h2>My projects</h2></div>
      <div class="project-tile"><h2>My projects</h2></div>
      <div class="project-tile"><h2>My projects</h2></div>
      <div class="project-tile"><h2>My projects</h2></div>
    </div>
    <footer id="footer">Footer</footer>
</div>
    <script src=https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js></script>
</body>
</html>

Here is my CSS:

html {
box-sizing: border-box;
margin: 0;
background-color: red;
font-family: sans-serif;
}


h1 {
color: #362312;
font-family:sans-serif;
text-align:center;
}

#container {
display: grid;
position: relative;
border: 0px;
top: 80px;
grid-template-columns: 1fr;
grid-template-rows: 10fr 10fr 1fr;
background-color: #red;
}

#navbar {
  top: 0;
  left: 0;
  position: fixed;
  background-color: #B200ED;
  width: 100%;
  height: 91px;
  z-index: 1;
}

#welcome-section {
  background-color: #EC5578;
}

#projects {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 300px 300px 300px 300px;
  background-color: #C0C0C0;
}

#footer {
  background-color: #FFF200;
}

.project-tile {
  margin: 10px;
  background-color: #FC6600;
  padding: 20px;
}

The bit I have set to background colour red is what’s wigging me out?

I can’t figure out how to get the DIV #container to go right across the browser page even when I set the width to 100%.

Also why is there a red border at the top but not at the bottom?

(Please I know there are probably other things wrong with my code but I only want to fix this one issue and I want to figure the rest out by myself). :slight_smile:

Please excuse the garish colours. I only set them to crazy colours while I am getting everything set out right at first :crazy_face:

You can see the website here: http://www.pdxbiomed.com/FCC/Personal%20Portfolio/

2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

3

Thanks it was a bit of a train crash! Sorry.

4

No worries. Glad to help.

5

So your div is inside of your body.
By default I believe the margin for the body is set to 8px.

body {
  margin: 0;
}

Setting the margin to 0 cuts the edges off of the body and lets it go all the way across.

As for the vertical space, I think that this is a problem with Collapsing Margins. Because I was able to remove those gaps between the body, header, and footer, by entering negative values. There is a lot going on in your project, you also didn’t close your head element, but I think understanding margin collapsing will help you solve this issue! Hopefully this helps!

Cheers

1 Like
6

That is super awesome, thanks!