Question posted in 
I am currently in the process of making a website for a minecraft server. It is going quite well although it is still in it’s infancy. However I have a very stubborn margin on the left which no matter what I try I cannot get rid of. I am not great at web development so maybe there is something that I haven’t seen in the html or css.
[Edit] Forgot to add this when initially writing this, I have actually looked at questions asking similar things on here but none of the solutions worked.Here you can see the margin on the left
And Here is the html and css:
@charset "utf-8";
body {
margin:0;
overflow:hidden;
position: absolute;
}
html {
overflow-y: scroll; overflow-x:hidden;
height: 100%;
padding:0;
}
body {
color: #fff;
margin: 0;
padding: 0;
-webkit-perspective: 1px;
perspective: 1px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
header {
box-sizing: border-box;
min-height: 40vw;
padding: 30vw 0 10vw;
position: relative;
-webkit-transform-style: inherit;
transform-style: inherit;
width: 100vw;
}
header,
header:before { background: 50% 50% / cover; }
header::before {
bottom: 0;
content: "";
left: 0;
position: absolute;
right: 0;
top: 0;
display: block;
background-color: midnight-blue;
background-image: url(https://imgur.com/ehxgn4Q.png);
background-size: 100%;
margin-left:0px;
-webkit-transform-origin: center center 0;
-webkit-transform: translateZ(-1px) scale(2);
transform-origin: center center 0;
transform: translateZ(-1px) scale(2);
z-index: -1;
min-height: 100vh;
}
header * {
font-family:Jura;
font-weight: bold;
letter-spacing: 0.2em;
text-align: center;
margin: 0;
padding: 1em 0;
}
header p { background-color: hsla(0, 0%, 100%,0.1); }
main {
background-color:white;
line-height: 1.7;
max-width: 32em;
padding: 5% calc(50% - 16em) 35%;
position: relative;
z-index: 2;
font-family:Jura;
color:#4b4c4d;
}
.footer-basic {
padding:40px 0;
background-color:#b7e2fc;
color:#4b4c4d;
}
.footer-basic ul {
padding:0;
list-style:none;
text-align:center;
font-size:18px;
line-height:1.6;
margin-bottom:0;
}
.footer-basic li {
padding:0 10px;
}
.footer-basic ul a {
color:inherit;
text-decoration:none;
opacity:0.8;
}
.footer-basic ul a:hover {
opacity:1;
}
.footer-basic .social {
text-align:center;
padding-bottom:25px;
}
.footer-basic .social > a {
font-size:24px;
width:40px;
height:40px;
line-height:40px;
display:inline-block;
text-align:center;
margin:0 8px;
color:inherit;
opacity:0.75;
}
.footer-basic .social > a:hover {
opacity:0.9;
}
.footer-basic .copyright {
margin-top:15px;
text-align:center;
font-size:13px;
color:#aaa;
margin-bottom:0;
}
.list-inline-item {
float:left;
margin-left:268px;
font-family:Jura;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/main.css" rel="stylesheet">
<script src="main.js"></script>
<title>WinterCrest</title>
</head>
<body>
<header>
<h1>Server IP Address: play.wintercrestmc.com</h1>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porta, augue ut vulputate aliquet, est massa malesuada libero, nec aliquet nibh nisl sit amet urna. In tincidunt maximus quam, ac feugiat ante porta id. Maecenas lobortis feugiat lorem vel auctor. Integer a nulla in orci ultrices semper. Suspendisse dapibus quam vel fringilla elementum. Etiam nibh lectus, maximus non sapien non, faucibus porttitor est. Proin eget fringilla sem. Nullam urna augue, vulputate sit amet dui eget, scelerisque facilisis mauris. Nam lorem est, elementum sed ullamcorper volutpat, suscipit et dui.</p>
<p>Nulla ac justo lacus. Vestibulum urna nulla, iaculis in sapien sed, pretium semper tortor. Maecenas tristique, erat nec fermentum varius, massa arcu faucibus libero, ut convallis lacus odio a enim. Aenean semper, turpis auctor placerat pellentesque, ligula justo vehicula ex, accumsan pellentesque nisi diam eget neque. Mauris id risus velit. Phasellus malesuada est turpis, ac congue odio malesuada ornare. Vivamus in diam mi. Mauris pharetra vestibulum lacus, nec iaculis mi vehicula eget. Integer finibus id libero ut cursus.</p>
<p>Etiam nec gravida tortor. Duis placerat egestas urna. Nulla ullamcorper nisl non nulla consectetur, ut sodales elit iaculis. Sed gravida porttitor felis non commodo. Nunc venenatis lorem diam, nec ornare purus fringilla vitae. Curabitur sed leo orci. Nam eros enim, interdum elementum tristique vel, aliquam a nisl. In ac interdum neque, in lacinia mi. Donec porta a lacus sit amet auctor.</p>
<p>Nunc tincidunt erat vulputate velit malesuada, quis dapibus est tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ullamcorper maximus urna a suscipit. In at vulputate sapien, sit amet sollicitudin lorem. Sed feugiat auctor neque vel efficitur. Quisque blandit porttitor massa, eu facilisis tortor volutpat a. Nam accumsan faucibus mauris, in lobortis sapien imperdiet vitae. Interdum et malesuada fames ac ante ipsum primis in faucibus. Integer hendrerit sit amet purus vitae finibus. Curabitur ut sodales lacus, ac dignissim arcu. Maecenas sit amet rhoncus odio. Aliquam viverra ligula ac justo elementum vestibulum. Maecenas at semper tellus. Sed malesuada placerat gravida. Maecenas sapien erat, vestibulum eget ante sollicitudin, laoreet blandit nunc. Donec nisi turpis, vestibulum eu lacus sed, cursus aliquam ipsum.</p>
<p>Quisque sed rhoncus leo. Suspendisse nec nibh odio. Aenean sed felis dignissim, faucibus massa id, tincidunt erat. Nullam nec rutrum risus. Fusce rutrum orci et pulvinar condimentum. In hac habitasse platea dictumst. Praesent eget justo pulvinar, rutrum erat non, luctus justo. Nulla nisi velit, mollis non ipsum eu, convallis tincidunt odio. Ut et massa ac magna pellentesque varius sit amet at dolor. Morbi tristique, elit eget ornare fringilla, ipsum neque ultrices neque, eget scelerisque dolor purus id enim. Aenean in fringilla mi, nec tristique nunc. Suspendisse potenti. Sed ultricies eros sit amet maximus ultrices.</p>
</main>
<div class="footer-basic">
<footer>
<div class="social"><a href="https://discord.gg/XMVhrct"><img class="discord_logo" src="images/social_icons/logo-discord.svg"></img></a><a href="https://wintercrest.freeforums.net/"><img class="forum_logo" src="images/social_icons/people-circle-outline.svg"></img></a>
<ul class="list-inline">
<li class="list-inline-item"><a href="https://www.minecraftforum.net/forums/servers-java-edition/pc-servers/3005157-wintercrest-non-grief-survival-friendly-community?" target="_blank">Leave a Review</a></li>
<li class="list-inline-item"><a href="https://wintercrest.enjin.com/shop" target="_blank">Donate To Us</a></li>
<li class="list-inline-item"><a href="https://forms.gle/UncJMpFWz83bjRMj7" target="_blank">Make A Suggestion</a></li>
<li class="list-inline-item"><a href="https://docs.google.com/document/d/1ZoLyouZs0lf34OccN6QEhOVBhpQF5w1sP_JvNG8Y2kE/edit?usp=sharing" target="_blank">Harassment Policy</a></li>
</ul>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>
3
Answers
Add width :100% to body css
My first thought is that browsers have their own default settings for many tags.
Often, a css file is used to make sure that only the css you specify is used by the browsers.
Something like:
Include whatever tags and attributes you want.
Set the margins and paddings for all the tags you use in your html to 0.
Then you can set what you want in classes or IDs or inline so you know exactly what is coming from where.
Not sure if this is your issue, but should help you track it down.
Also, put borders on all your tags to identify which element is the one responsible for the margin you don’t want.
Just a couple thoughts.
This will most likely be caused by some stray margin or padding somewhere in your website.
A good habit to get into is resetting margin and padding to 0 on all elements at the top of your CSS.