Here the Bootraps .row class is adding flex box to the div which in term is blocking the float right css. The float property gets ignored in a flex container.
From the flexbox specification:
A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout. so float does not create floating or clearance of flex item.
remove the .row class and you float style should start work!
Just remove the container element.
*, html, body
{
margin: 0;
padding: 0;
}
header
{
background-color: deepskyblue;
}
ul
{
list-style: none;
}
ul li{
display: inline-block;
}
header nav
{
float: right;
}
header nav ul li a
{
padding-right: 30px;
font-weight: bold;
color: white;
transition: all 0.5s ease-in-out;
}
<!DOCTYPE html>
<html>
<head>
<title>Website Project</title>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<header>
<div class="row">
<!-- <a href="" class="logo" > <img src="images/linkedin_logo.png" alt="Image" height="42" width="42"></a> -->
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Work</a></li>
<li><a href="">Services</a></li>
<li><a href="">Clients</a></li>
<li><a href="">Our Team</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</div>
<p>This is some text.</p>
</header>
</body>
</html>
I’m not sure why my header element with the nav won’t float to the right with “float: right;”
I’m just getting started with html&CSS I was hoping someone could help make my nav bar float to the right. I’ve looked up a couple of videos and stack overflows but I’m not sure what’s wrong I just started by looking up a few things to get started from bootstrap, W3 and some other sites.
my code below
*,
html,
body {
margin: 0;
padding: 0;
}
header {
background-color: deepskyblue;
}
ul {
list-style: none;
}
ul li {
display: inline-block;
}
header nav {
float: right 1;
}
header nav ul li a {
padding-right: 30px;
font-weight: bold;
color: white;
transition: all 0.5s ease-in-out;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<header>
<div class="container">
<div class="row">
<!-- <a href="" class="logo" > <img src="images/linkedin_logo.png" alt="Image" height="42" width="42"></a> -->
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">Work</a></li>
<li><a href="">Services</a></li>
<li><a href="">Clients</a></li>
<li><a href="">Our Team</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</div>
<p>This is some text.</p>
</div>
</header>
