Picture isn't touching screen border

Question

I'm coding a website annd a background picture isn't fitting the whole screen and there is white space between the picture and the border of the screen.I've searched on google for an hour and "margin:0; padding:0; border:0;" all haven't worked.

This is my code:

nav ul {
  border-style: solid;
  border-width: 0px;
  padding: 10px;
  margin: 0px 0px 0px 0px;
  background-color: none;
  text-align: center;
}

nav ul li {
  list-style-type: none;
  display: inline;
  margin-right: 10px;
  margin-left: 10px;
  color: black;
  font-size: 150%;
}

nav ul li a {
  text-decoration: none;
  color: black;
}

#big {
  text-align: right;
  color: black;
  margin: 10px 0px 0px 0px;
  padding: 10px 0px 0px 0px;
}

#first {
  background-image: url('https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0px 0px 0px 0px;
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
}

#text1 {
  text-align: center;
}

#nav1 {
  position: fixed;
  text-align: center;
  height: auto;
  width: auto;
}

jpg {
  line-height: 0px height:100%;
}

h1 {
  margin-top: 5in;
}

<div id="first" background-image="Logo.jpg">
  <header>
    <nav id="nav1">
      <ul>
        <li>Home</li>
        <li><a href="join_us.html">Join</a></li>
        <li><a href="contact_us.html">Contact us</a></li>
        <li><a href="about_us.html">About us</a></li>
        <li><a href="Sub.html">Subscriptions</a></li>
      </ul>
    </nav>
  </header>
  <br><br>
  <h1 id="big">############################.</h1>
  <p>.</p>
  <br><br><br><br><br>
</div>

Sorry my code is poorly arranged and unprofessional. I'd really appreciate an answer.

score 1 · Answer 1 · answered Sep 04 '20 at 15:31

I believe you should add in your css

html,
body {
    padding: 0;
    margin: 0;
}

By default, the document body has a margin around it, that's why you saw a white border around your picture

html,
body {
  margin: 0;
  padding: 0;
}
nav ul {
  border-style: solid;
  border-width: 0px;
  padding: 10px;
  margin: 0px 0px 0px 0px;
  background-color: none;
  text-align: center;
}

nav ul li {
  list-style-type: none;
  display: inline;
  margin-right: 10px;
  margin-left: 10px;
  color: black;
  font-size: 150%;
}

nav ul li a {
  text-decoration: none;
  color: black;
}

#big {
  text-align: right;
  color: black;
  margin: 10px 0px 0px 0px;
  padding: 10px 0px 0px 0px;
}

#first {
  background-image: url('https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0px 0px 0px 0px;
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
}

#text1 {
  text-align: center;
}

#nav1 {
  position: fixed;
  text-align: center;
  height: auto;
  width: auto;
}

jpg {
  line-height: 0px height:100%;
}

h1 {
  margin-top: 5in;
}

<div id="first">
  <header>
    <nav id="nav1">
      <ul>
        <li>Home</li>
        <li><a href="join_us.html">Join</a></li>
        <li><a href="contact_us.html">Contact us</a></li>
        <li><a href="about_us.html">About us</a></li>
        <li><a href="Sub.html">Subscriptions</a></li>
      </ul>
    </nav>
  </header>
  <br><br>
  <h1 id="big">############################.</h1>
  <p>.</p>
  <br><br><br><br><br>
</div>

score 1 · Answer 2 · answered Sep 04 '20 at 15:33

This space is coming from the body tag. Just disable it using:

body {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
}

nav ul {
  border-style: solid;
  border-width: 0px;
  padding: 10px;
  margin: 0px 0px 0px 0px;
  background-color: none;
  text-align: center;
}

nav ul li {
  list-style-type: none;
  display: inline;
  margin-right: 10px;
  margin-left: 10px;
  color: black;
  font-size: 150%;
}

nav ul li a {
  text-decoration: none;
  color: black;
}

#big {
  text-align: right;
  color: black;
  margin: 10px 0px 0px 0px;
  padding: 10px 0px 0px 0px;
}

#first {
  background-image: url('https://www.google.fr/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png');
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0px 0px 0px 0px;
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
}

#text1 {
  text-align: center;
}

#nav1 {
  position: fixed;
  text-align: center;
  height: auto;
  width: auto;
}

jpg {
  line-height: 0px height:100%;
}

h1 {
  margin-top: 5in;
}

<div id="first" background-image="Logo.jpg">
  <header>
    <nav id="nav1">
      <ul>
        <li>Home</li>
        <li><a href="join_us.html">Join</a></li>
        <li><a href="contact_us.html">Contact us</a></li>
        <li><a href="about_us.html">About us</a></li>
        <li><a href="Sub.html">Subscriptions</a></li>
      </ul>
    </nav>
  </header>
  <br><br>
  <h1 id="big">############################.</h1>
  <p>.</p>
  <br><br><br><br><br>
</div>

Picture isn't touching screen border

2 Answers2