Here I'm creating a header with display: flex; for perfect horizontally centering my elements inside that and not vertically centering them. Without using Bootstrap, everything works right, but as soon as I add Bootstrap CSS to my HTML, they just leap into the center of the .container with a little spacing between them, I want my .right-svg and .nike-svg to be placed at the very right and left spaces in their .container.
NOTE: The result f this snippet is exactly what I want it to look like, but please add Bootstrap CSS 3 to this HTML as I did, and the problem will be shown.
Any advises is welcome.
*,
*::after,
*::before{
padding: 0;
margin: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
main{
max-width: 100%;
}
/*====================== header ======================*/
header .row{
margin: 0;
}
header .row .col-xs-12{
padding: 0;
}
header .row .gen-nav-header{
height: 60px;
background-color: #e38d13;
}
header .row .gen-nav-header .container-fluid{
width: 96%;
height: 100%;
margin: auto;
border: 1px solid #000;
display: flex;
/*align-items: center;*/
justify-content: space-between;
flex-direction: row-reverse;
}
header .row .gen-nav-header .container-fluid .right-svg{
display: flex;
justify-content: end;
align-items: center;
border: 1px solid #000;
flex-direction: row-reverse;
}
header .row .gen-nav-header .container-fluid .nike-svg{
display: block;
position: relative;
left: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nike Official Site. Nike DE</title>
</head>
href="node_modules/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" href="images/nike-icon.jpg">
<body>
<main>
<!-- ================ header ============== -->
<header>
<div class="row">
<div class="col-xs-12">
<div class="gen-nav-header">
<div class="container-fluid">
<!------------------ right svg ------------------->
<div class="right-svg">
<span class="hamburger-menu-svg">
<svg width="24px" height="24px" fill="#111" viewBox="0 0 24 24"><path d="M21 13H3c-.6 0-1-.4-1-1s.4-1 1-1h18c.6 0 1 .4 1 1s-.4 1-1 1zm0-8H3c-.6 0-1-.4-1-1s.4-1 1-1h18c.6 0 1 .4 1 1s-.4 1-1 1zm0 16H3c-.6 0-1-.4-1-1s.4-1 1-1h18c.6 0 1 .4 1 1s-.4 1-1 1z"></path></svg>
</span>
<span class="search-svg">
<svg class="pre-search-input-icon" fill="#111" height="30px" width="30px" viewBox="0 0 24 24"><path d="M21.71 20.29L18 16.61A9 9 0 1 0 16.61 18l3.68 3.68a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.39zM11 18a7 7 0 1 1 7-7 7 7 0 0 1-7 7z"></path></svg>
</span>
<span class="shopping-svg">
<svg width="24px" height="24px" fill="#111" viewBox="0 0 24 24"><path d="M16 7a1 1 0 0 1-1-1V3H9v3a1 1 0 0 1-2 0V3a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v3a1 1 0 0 1-1 1z"></path><path d="M20 5H4a2 2 0 0 0-2 2v13a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a2 2 0 0 0-2-2zm0 15a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7h16z"></path></svg>
</span>
</div>
<!----------------- end right svg ------------------->
<span class="nike-svg">
<svg class="pre-logo-svg" height="60px" width="60px" fill="#111" viewBox="0 0 69 32"><path d="M68.56 4L18.4 25.36Q12.16 28 7.92 28q-4.8 0-6.96-3.36-1.36-2.16-.8-5.48t2.96-7.08q2-3.04 6.56-8-1.6 2.56-2.24 5.28-1.2 5.12 2.16 7.52Q11.2 18 14 18q2.24 0 5.04-.72z"></path></svg>
</span>
</div>
</div>
</div>
</div>
</header>
</main>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
