Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Markup (HTML, XHTML, XML) _ Trying to get rid of a border to no avail

Posted by: BLeeOBS Mar 17 2019, 02:05 PM

I used an example for a responsive website from w3schools.com. I did quite a bit of editing to it but the page seems to have a white border around it that I cannot seem to get rid of. There is a box-sizing: border-box line that I tried eliminating but it made no change.

Any help on this would be greatly appreciated.

the website can be viewed at http://www.mojohandblues.com

the HTML is as follows:

CODE

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing: border-box;
}
.menu {
  float:left;
  width:20%;
  text-align:center;
}
.menu a {
  background-color:#18ff00;
  padding:8px;
  margin-top:0px;
  display:block;
  width:100%;
  color:black;
}
.main {
  float:left;
  width:70%;
  padding:0 20px;
}
.right {
  background-color:#000000;
  float:left;
  width:10%;
  padding:15px;
  margin-top:0px;
  text-align:center;
}

@media only screen and (max-width:620px) {
  /* For mobile phones: */
  .menu, .main, .right {
    width:100%;
  }
}
</style>
</head>
<body style="font-family:Verdana;color:#18ff00;">

<div style="background-color:#000000;padding:15px;text-align:center;">
  <img src="images/hand.png" style="max-width:100%;height:auto;"><img src="images/MHBB.png" style="max-width:100%;height:auto;">
</div>

<div style="overflow:auto;background-color:#000000">
  <div class="menu">
    <a href="#">Home</a>
    <a href="about.html">About Us</a>
    <a href="music.html">Music</a>
    <a href="video.html">Video</a>
    <a href="gallery.html">Gallery</a>
    <a href="calendar.html">Calendar</a>
  </div>

  <div class="main">
    <h2>BLUES YOU CAN USE</h2>
    <p>The Mojo Hand Blues Band has regrouped and is gearing up to bring you great music and a greater time.</p>
    <p>Get ready. We'll be heading your way soon.</p>
    <BR><BR><BR><BR><BR><BR><BR><BR><BR>
  </div>


</div>

<div style="background-color:#000000;text-align:center;padding:10px;margin-top:0px;">
        <a href="https://www.facebook.com/TheMojoHandBluesBand" target="_blank"><img src="images/fb.png" style="max-width:5%;height:auto;"></a>
    <a href="https://www.twitter.com/themojohandband" target=_blank"><img src="images/twitter.png" style="max-width:5%;height:auto;"></a>
    <a href="https://www.instagram.com/mojohandbluesband" target="_blank"><img src="images/insta.png" style="max-width:5%;height:auto;"></a>
    <a href="mailto:themojohandbluesband@gmail.com"><img src="images/mail.png" style="max-width:5%;height:auto;"><br></a>
    © copyright 2019 MojoHandBlues.com</div>
</body>
</html>

Posted by: pandy Mar 17 2019, 11:48 PM

It's the default padding on BODY. Some browsers used margin, maybe they still do, so...

CODE
body  { margin: 0; padding: 0 }


Or, if you want the background color to stretch all the way down, apply it to BODY. Or do both if you wish.

Posted by: BLeeOBS Mar 18 2019, 01:55 PM

QUOTE(pandy @ Mar 18 2019, 12:48 AM) *

It's the default padding on BODY. Some browsers used margin, maybe they still do, so...

CODE
body  { margin: 0; padding: 0 }


Or, if you want the background color to stretch all the way down, apply it to BODY. Or do both if you wish.


AWESOME! Thank you!

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)