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


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,730
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
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

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

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th April 2024 - 04:41 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC