Data no canto superior direito faz com que o cabeçalho seja descentralizado
A data no canto direito de cada postagem está fazendo com que o elemento H2 não seja centralizado.
É uma questão muito simples, com um resultado irritante. Eu tentei muitas coisas, e ainda não consigo parar de se descentrar! Eu sei que há uma correção, mas ainda não consigo corrigi-la.
Aqui está uma imagem descrevendo o problema:
Aqui está o código:
body {
font-family: 'Roboto', Arial, Helvetica, sans-serif;
background-color: #FFFFFF;
color: #000000;
text-align: center;
}
.container {
width: 80%;
display: inline-block;
}
.post {
border: 2px solid #000000;
padding: 0px 4px 0px 4px;
}
.post p,h2 {
margin: 0;
}
.post h2 {
text-align: center;
}
.post p {
text-align: left;
text-indent: 40px;
line-height: 1.8;
}
hr {visibility: hidden;}
.date {
float: right;
font-size: 12pt;
font-style: italic;
font-weight: normal;
}
@media screen and (max-width: 600px){
.container {width: 100%;}
.post p {text-align: justify;text-indent: 0px;font-size: 14pt;}
}<body>
<h1>Welcome to Henry's Blog!</h1>
<div class="container">
<div class="post" id="10">
<span class="date">10/15/17</span>
<h2>Tenth Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
</div>
<hr>
<div class="post" id="9">
<span class="date">10/15/17</span>
<h2>Ninth Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
</div>
<hr>
<div class="post" id="8">
<span class="date">10/15/17</span>
<h2>Eighth Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
</div>
<hr>
<div class="post" id="7">
<span class="date">10/15/17</span>
<h2>Seventh Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
</div>
<hr>
<div class="post" id="6">
<span class="date">10/15/17</span>
<h2>Sixth Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
</div>
<hr>
<div class="post" id="5">
<span class="date">10/15/17</span>
<h2>Fifth Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
</div>
<hr>
<div class="post" id="4">
<span class="date">10/15/17</span>
<h2>Fourth Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
</div>
<hr>
<div class="post" id="3">
<span class="date">10/15/17</span>
<h2>Third Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
</div>
<hr>
<div class="post" id="2">
<span class="date">10/15/17</span>
<h2>Second Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
</div>
<hr>
<div class="post" id="1">
<h2>First Post</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Augue neque gravida in fermentum et sollicitudin ac. Feugiat in ante metus dictum. Sed turpis tincidunt id aliquet risus feugiat in. Venenatis a condimentum vitae sapien. Ut pharetra sit amet aliquam id diam maecenas ultricies. Praesent elementum facilisis leo vel fringilla est ullamcorper eget. Tristique nulla aliquet enim tortor. Vitae elementum curabitur vitae nunc sed velit dignissim. Turpis cursus in hac habitasse platea dictumst quisque. Dictumst quisque sagittis purus sit amet volutpat consequat mauris nunc.</p>
</div>
<hr>
<p>Blog Posts: <a href="#1">1</a> <a href="#2">2</a> <a href="#3">3</a> <a href="#4">4</a> <a href="#5">5</a> <a href="#6">6</a> <a href="#7">7</a> <a href="#8">8</a> <a href="#9">9</a> <a href="#10">10</a></p>
</div>
</body>
</html>