В общем, не так давно начал учить HTML/CSS. Чтобы лучше усваивать материал начал создавать собственный сайт, и у меня возникла проблема с текстом. Дело в том, что он просто налазит друг на друга. Почему - черт его знает. Поэтому сюда и пишу.
HTML:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>About</title>
<link type="text/css" rel="stylesheet" href="style/About.css" />
</head>
<body>
<div id="head">
<img src="images/Name.png" alt="Calligraphy K">
</div>
<div class="hub">
<a href="home.html">
<div id="home">
<p>Главная</p>
</div>
</a>
<a href="about.html">
<div id="about">
<p>О нас</p>
</div>
</a>
<a href="projects.html">
<div id="projects">
<p>Наши проекты</p>
</div>
</a>
</div>
<div class="main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam incidunt repudiandae dolorem libero, voluptatum voluptas praesentium amet, sed impedit facilis eaque placeat quasi ipsa eos minus veritatis totam. Itaque, asperiores.</p>
</div>
</body>
</html>
```
CSS:
```
body {
background-color: #111111;
margin-right: 10%;
margin-left: 10%;
font-size: 110%;
line-height: 1px;
font-family: "MagistralC";
}
head {
height: 213px
}
.hub {
height: 39px;
border-left: 1px solid #3B3A3D;
background-color: #111111;
}
.main {
height: 200px;
background: #222222;
border: 4px double #3B3A3D;
clear: right;
}
.main p {
margin: 20px 0px 0px 20px;
color: #999999;
font-size: 110%;
}
home {
border-top: 1px solid #3B3A3D;
padding: 1px 15px;
background-color: #222222;
text-align: center;
background-color: #0D0D0D;
float: left;
}
about {
border: 1px solid #3B3A3D;
padding: 1px 15px;
background-color: #222222;
text-align: center;
float: left;
}
about:hover {
color: #EEEEEE;
}
projects {
border: solid 1px #3B3A3D;
border-left: none;
padding: 1px 15px;
background-color: #0D0D0D;
text-align: center;
float: left;
}
a:link {
text-decoration: none;
color: #EEEEEE;
}
a:visited {
text-decoration: none;
color: #EEEEEE;
}
a:hover {
text-decoration: none;
color: #737373;
}
```
