The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Trying to get rid of a border to no avail
BLeeOBS
post Mar 17 2019, 02:05 PM
Post #1





Group: Members
Posts: 2
Joined: 17-March 19
Member No.: 26,856



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 The Mojo Hand Blues Band

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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 17 2019, 11:48 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,403
Joined: 9-August 06
Member No.: 6



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
BLeeOBS
post Mar 18 2019, 01:55 PM
Post #3





Group: Members
Posts: 2
Joined: 17-March 19
Member No.: 26,856



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!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th October 2019 - 10:00 PM