Issue
I'm creating my own personal site using bootstrap.
I've using bootstrap4 with some modifications. However the html margin is bigger than body.
I've already checked other questions and they say that <p>
or some other tag has a default margin and you need to zero that, however I'm using a reset.css and plus I tried to zero margin of a lot of elements and it didn't work.
the reset css and the link to my web site: https://sitezinho--mateusmsouza.repl.co/
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
and HTML
<!DOCTYPE html>
<html>
<head>
<title>Mateus Machado - Site Pessoal</title>
<link rel="stylesheet" type="text/css" href="public/css/reset.css">
<link rel="stylesheet" type="text/css" href="public/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="public/css/custom.css">
<script type="text/javascript" href="public/js/jquery-3.4.0.min.js">
</script>
<script type="text/javascript" src='public/js/bootstrap.bundle.min.js'>
</script>
</head>
<body>
<main role="main">
<nav class="navbar sticky-top navbar-expand-lg navbar-light " style="background-color: black">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a href="/index.html" class="nav-link text-light px-5">Hello World</a></li>
<li class="nav-item active"><a href="#" class="nav-link text-light px-5">Projetos</a></li>
<li class="nav-item active"><a href="#" class="nav-link text-light px-5">Material de Estudo</a></li>
</ul>
<ul class="navbar-nav mr-auto>
<li class=" nav-item active "> <a href="http://github.com/mateusmsouza " class="nav-link "><img src="GitHub-Mark-Light-32px.png "> </a></li>
</ul>
</nav>
<section class="my-4 " >
<div class="content ">
<h1 class="h1-responsive font-weight-bold text-center ">printf("Olar ");</h1>
<p class="lead grey-text text-center w-responsive mx-auto mb-5 ">Me chamo Mateus Machado, trabalho atualmente como Software Tester, graduando em Tecnologia de Banco de Dados. Desenvolvo para projetos pessoais no tempo livre e no tempo mais livre toco violão e faço outras coisas de humano :)</p>
<div class="container-fluid px-5 py-5 " style="background-color:grey ";>
<div class="row container-fluid " ">
<div class="col-5">
<img class="img-fluid img-thumbnail" src="img/magogenteboa.jpg">
</div>
<div class="col-7 container-fluid">
<ul>
<li style="background-color:rgba(0,0,0,.3)" class="px-3 py-3 my-1">
<img class="img-fluid" src="img/baseline_school2.png">
<p class="text-light">Técnico em Redes de Computadores pela
<a href="http://etecjbento.com.br/web/" class="acustom">Etec Cônego José Bentos</a>
</p>
<small class="text-light font-italic">Período: 2016 - 2017</small>
<li style="background-color:rgba(0,0,0,.3)" class="px-3 py-3 my-1">
<img class="img-fluid" src="img/baseline_school2.png">
<p class="text-light">Graduando em Tecnologia de Banco de Dados pela <a href="http://fatecsjc-prd.azurewebsites.net/" class="acustom">Fatec São José dos Campos</a> </p>
<small class="text-light font-italic">Período: 2018 - Atualmente</small>
</li>
<li style="background-color:rgba(0,0,0,.3)" class="px-3 py-3 my-1">
<img class="img-fluid" src="img/baseline_work2.png">
<p class="text-light">Tester de Software na
<a href="https://www.demaria.com.br/site/" class="acustom">DeMaria</a>
</p>
<small class="text-light font-italic" >Período: 2017 - Atualmente</small>
</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</main>
<style>
body, p, html , h1, nav, section, main, img{
margin: 0;
}
</style>
</body>
</html>
Solution
Change margin: 0;
to margin: 0 !important;
This may fix it, but the correct way would be removing 'margin' from the class that is being applied to this element.
Answered By - Brhaka
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.