Маржа:
Вы можете использовать CSS свойство width с относительной единицей просмотра vw ', так что ваш контент будет изменяться в зависимости от размера экрана) и поле свойства CSS со значением auto:
Браузер выбирает подходящее поле для использования. Например, в некоторых случаях это значение может использоваться для центрирования элемента.
Вкратце:
.p {
font-size: 20px;
width: 50vw; /* Added --- Setting the width of your p in % of the width of the screen */
margin:auto; /* Added --- make margin-left & margin-right even resulting of centering your p */
}
body {
margin:0;
background-image: url('pozadi.png');
background-repeat: no-repeat;
}
.p {
font-size: 20px;
width: 50vw;
margin:auto;
}
h1 {
font-family: "Comic Sans MS", cursive, sans-serif;
}
li {
font-family: "Comic Sans MS", cursive, sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #7092be;
}
li {
float: left;
}
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #496fa0;
}
.active {
background-color: #bdcce1;
}
<!DOCTYPE html>
<html lang='cs'>
<head>
<title></title>
<meta charset='utf-8'>
<meta name='description' content=''>
<meta name='keywords' content=''>
<meta name='author' content=''>
<meta name='robots' content='all'>
</head>
<body>
<h1> Vtipy na den</h1>
<ul>
<li><a class="active" href="index.html">Domov</a></li>
<li><a href="ctyri.html">Najdu co neznám</a></li>
<li><a href="obrazky.html">Obrázky</a></li>
<li><a href="videjko.html">Video vtip</a></li>
<li><a href="tabulky.html">Tabulky</a></li>
</ul>
<main>
<p class="p">“According to all known laws of aviation, there is no way that a bee should be able to fly. Its wings are too small to get its fat little body off the ground. The bee, of course, flies anyways. Because bees don't care what humans think is impossible.”</p>
</main>
</body>
</html>
Путь Flexbox:
Или вы можете использовать макет flexbox CSS.
main{
display:flex; /* Added --- making the container a flexbox */
justify-content:center; /* Added --- centering its element(s) */
}
.p {
font-size: 20px;
position: relative;
width: 50vw; /* Added --- Setting the width of your p in % of the width of the screen */
}
body {
margin:0;
background-image: url('pozadi.png');
background-repeat: no-repeat;
}
main{
display:flex;
justify-content:center;
}
.p {
font-size: 20px;
position: relative;
width: 50vw;
}
h1 {
font-family: "Comic Sans MS", cursive, sans-serif;
}
li {
font-family: "Comic Sans MS", cursive, sans-serif;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #7092be;
}
li {
float: left;
}
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #496fa0;
}
.active {
background-color: #bdcce1;
}
<!DOCTYPE html>
<html lang='cs'>
<head>
<title></title>
<meta charset='utf-8'>
<meta name='description' content=''>
<meta name='keywords' content=''>
<meta name='author' content=''>
<meta name='robots' content='all'>
</head>
<body>
<h1> Vtipy na den</h1>
<ul>
<li><a class="active" href="index.html">Domov</a></li>
<li><a href="ctyri.html">Najdu co neznám</a></li>
<li><a href="obrazky.html">Obrázky</a></li>
<li><a href="videjko.html">Video vtip</a></li>
<li><a href="tabulky.html">Tabulky</a></li>
</ul>
<main>
<p class="p">“According to all known laws of aviation, there is no way that a bee should be able to fly. Its wings are too small to get its fat little body off the ground. The bee, of course, flies anyways. Because bees don't care what humans think is impossible.”</p>
</main>
</body>
</html>