Я создаю свой личный сайт, используя bootstrap.
Я использую bootstrap4 с некоторыми изменениями.Однако html margin больше, чем body.
Я уже проверил другие вопросы, и они говорят, что <p> или какой-то другой тег имеет поле по умолчанию, и вам нужно обнулить его, однако я использую reset.cssи плюс я попытался обнулить поля для многих элементов, и это не сработало.
css для сброса и ссылка на мой веб-сайт: 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;
}
и 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>