Trying to get rid of a border to no avail |
Trying to get rid of a border to no avail |
BLeeOBS |
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> |
pandy |
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. |
BLeeOBS |
Mar 18 2019, 01:55 PM
Post
#3
|
Group: Members Posts: 2 Joined: 17-March 19 Member No.: 26,856 |
|
Lo-Fi Version | Time is now: 25th April 2024 - 12:27 PM |