Проблема при изменении масштаба в браузере. Весь контент смешается влево. Многие пишут, что margin: 0 auto;
решит проблему, но не помогло. Дайте совет.
body {
background: #000;
font-family: sans-serif;
margin: 0;
padding: 0px;
}
@font-face {
font-family: Narita-Monospace;
src: url(fonts/Narita-Monospace.ttf);
font-family: Studio-Gothic-Alternate-Bold-trial;
src: url(fonts/Studio-Gothic-Alternate-Bold-trial.ttf);
}
h1 {
margin-top: 280px;
margin-left: 450px;
color: white;
top: 50%;
left: 50%;
text-align: center;
width: 450px;
height: 10px;
font-family: Studio-Gothic-Alternate-Bold-trial;
font-size: 70px;
opacity: 0.9;
}
div {
margin-bottom: 130px;
width: 300px;
height: 30px;
}
.contact_with_me {
background-color: white;
width: 100%;
height: 700px;
position: absolute;
}
.textwhatido {
text-align: center;
margin-top: 20px;
margin-left: 290px;
color: gray;
font-size: 8px;
font-family: Narita-Monospace;
width: 740px;
}
p {
font-size: 35px;
color: black;
}
.image_on_contact_with_me {
margin-top: 200px;
margin-left: 290px;
position: absolute;
}
.textaboutwhaido1 {
margin-top: 150px;
margin-left: 190px;
font-family: Narita-Monospace;
font-size: 18px;
text-align: center;
position: absolute;
}
.icreatesimple {
font-size: 18px;
}
.textaboutwhaido2 {
margin-left: 520px;
margin-top: 150px;
font-family: Narita-Monospace;
font-size: 18px;
text-align: center;
position: absolute;
}
.withaneye {
font-size: 18px;
}
.textaboutwhaido3 {
position: absolute;
text-align: center;
font-family: Narita-Monospace;
margin-left: 850px;
margin-top: 150px;
font-size: 18px;
}
.withmylove {
font-size: 18px;
}
.products {
font-family: Narita-Monospace;
font-size: 30px;
text-align: center;
margin-top: 50px;
}
.sorrybut {
font-family: Narita-Monospace;
font-size: 20px;
text-align: center;
}
.footer {
position: absolute;
margin-top: 700px;
}
<div class="text_on_video">
<h1>i do things...</h1>
</div>
<div class="scroll_icon">
</div>
<div class="video">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="jquery/jquery.backgroundvideo.min.js"></script>
<script>
$(document).ready(function() {
var videobackground = new $.backgroundVideo($('body'), {
"align": "centerXY",
"width": 1280,
"height": 720,
"path": "video/",
"filename": "stars_move",
"types": ["mp4"]
});
});
</script>
</div>
<div class="contact_with_me">
<div class="footer">
<img src="img/footer6.png">
</div>
<div class="textwhatido">
<h2>WHAT I DO</h2>
<p>Web developer with love for experiments, illustration & animation. Focusing on details i build interfaces for clients.</p>
</div>
<div class="textaboutwhaido1">
<h3>Simple</h3>
<p class="icreatesimple">I create simple and understandable interfaces.</p>
</div>
<div class="textaboutwhaido2">
<h4>Interface Design</h4>
<p class="withaneye">With an eye for details, I create beautiful design.</p>
<div class="products">
<h5>PRODUCTS</h5>
<p class="sorrybut">Sorry, but so far I have not made any projects, do not forget, I'm a beginner developer.<br> I'm working on it :)</p>
</div>
</div>
<div class="textaboutwhaido3">
<h4>Animation</h4>
<p class="withmylove">With my love of motion graphics i bring life to your projects</p>
</div>
</div>
<div class="image_on_contact_with_me">
<img src="icons/iconswhat.png">
</div>