Problemas com a Centralização
Estou com problemas para centralizar duas divs de forma paralela, sendo que a quantidade de divs em excesso e cores são tentativas de correção do erro, alguém poderia me dizer onde estou errando ao tentar centrarlizar os elementos que estão em vermelho ?
Spoiler
<!DOCTYPE html>
<!--For Portuguese-->
<html lang="pt-br">
<!--For English-->
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Matheus Arcanjo</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link href="https://fonts.googleapis.com/css?family=Alegreya" rel="stylesheet"><!-- font awesonme-->
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/regular.js" integrity="sha384-t7yHmUlwFrLxHXNLstawVRBMeSLcXTbQ5hsd0ifzwGtN7ZF7RZ8ppM7Ldinuoiif" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/brands.js" integrity="sha384-sCI3dTBIJuqT6AwL++zH7qL8ZdKaHpxU43dDt9SyOzimtQ9eyRhkG3B7KMl6AO19" crossorigin="anonymous"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/fontawesome.js" integrity="sha384-7ox8Q2yzO/uWircfojVuCQOZl+ZZBg2D2J5nkpLqzH1HY0C1dHlTKIbpRz/LG23c" crossorigin="anonymous"></script><!-- end of font awesome -->
</head>
<body>
<header>
<div id="header-inner">
<a href="index.html" id="logo"></a>
<nav>
<ul>
<a href="#" id="menu-icon"></a>
<li><a href="index.html" class="current">Home</a></li>
<li><a href="#">Currículo</a></li>
<li><a href="#">Abilidades</a></li>
<li><a href="#">Contato</a></li>
<li><a id="facebook" href="https://www.facebook.com/matheusarcanjjo" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
<li><a id="linkedin" href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
<li><a id="github" href="#" target="_blank"><i class="fab fa-github"></i></a></li>
</ul><!-- teste dos icones fora do menu
<ul class="social-header">
<li><a href="https://www.facebook.com/matheusarcanjjo" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-github"></i></a></li>
</ul>-->
</nav>
</div>
</header><section class="banner">
<div class="banner-inner">
<div id="left">
<img id="img-banner" src="img/matheus2.png">
</div>
<div class="right1">
<div id="right">
<h2>Matheus Arcanjo <br></h2>
<p>Nasceu em Goiânia em 28/10/1994. Graduado em Ciência da Computação pela Universidade Católica de Goiás em 2017, busca crescer como profissional na área de web design.</p>
</div>
</div>
</div>
</section><!-- End Banner -->
<section class="cv">
<h2>Formação Acadêmica</h2>
<div="education">
<ul>
<li>
<div><time>2012-2017</time></div>
</li>
</ul>
</div>
<h2>Experiência Profissional</h2>
<div id="work-timeline">
<ul>
<li>
<div><time>2013 - </time></div>
</li>
<li>
<div><time>2016</time></div>
</li>
<li>
<div><time>2016</time></div>
</li>
<li>
<div><time>2017</time></div>
</li>
</ul>
</div>
</section>
<section class="skills">
<h2>Conhecimentos e Abilidades</h2>
<progress value="30" max="100">lorem ipsum</progress>
</section><!-- end of cv -->
<section class="contact">
<h2>Contato</h2>
<form action="#" method="post">
<input type=text name="name"></br>
<input type="text" name="subject" ></br>
<input type="text" name="email"></br>
<input type="textarea" name="texto"></br>
<input type="button" name="eniar"></br>
</form>
</section><!-- end of contact -->
<footer>
<div id="footer-info">
<p>©: Matheus Arcanjo</p>
</div>
<div id="footer-social">
<ul class="social">
<li><a href="#" target="_blank"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-linkedin-in"></i></a></li>
<li><a href="#" target="_blank"><i class="fab fa-github"></i></a></li>
</ul>
</div>
</footer>
</body>
</html>
@import url('https://fonts.googleapis.com/css?family=Alegreya');* {
margin: 0;
padding: 0;
border: 0;
}body {
background-color: #F5F5F5;
color: #67727A;
font-family: 'Alegreya', serif;
}h2 {
font-size: 150%;
font-weight: 700;
}header{
background-color: #DEECDD;
width: 100%;
height: 86px;
}
#header-inner {
max-width: 1200px;
margin: 0 auto;
}
#logo{
margin: 20px;
float: left;
width: 200px;
height: 60px;
background: url(img/20070.png) no-repeat center;
}/--- Navigation --/
nav{
float: right;
padding: 25px 20px 0 0;
}
#menu-icon {
display: hidden;
width: 40px;
height: 40px;
background: url(img/nav.png) center;
}a:hover#menu-incon {
border-radius: 4px 4px 0 0;
}ul {
list-style-type: none;
}nav ul li {
font-family: 'Alegreya Sans', sans-serif;
font-size: 150%;
display: inline-block;
float: left;
padding: 10px;
}nav ul li a {
color: #8DC8B2 ;
text-decoration: none;
}nav ul li a:hover {
color: #2F7082;
}a:hover#facebook {
color: #3b5998;
}a:hover#linkedin{
color: #0274B3;
}a:hover#github {
color: black;
}
.current {
color: #2F7082;
}/ End of Navigation Stile /
.banner{
background-color: pink;
}
.banner-inner{
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 50px 0 50px 0;
position: relative;
background-color: cyan;
}
#img-banner{
width: 100%;
display: flex;
align-items: center
}
#left{
background-color: red;
max-width: 450px;
width: 45%
margin: 0 auto;
}
.right1{
background-color: red;
max-width: 450px;
width: 45%
margin: 0 auto;
float: right;
}
#right{
width: 100%;
display: flex;
align-items: center
}/End of banenr /
.cv{
clear: left;
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 50px 0 50px 0;
}
.skills{
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 50px 0 50px 0;
}
.contact{
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 50px 0 50px 0;
}
Discussão (6)
Carregando comentários...