Is there a way to align the red boxes side by side with some space in between them for separation, and how can I ensure that the signin/signup button appears against the blue background of the header?
I attempted using float but encountered issues.
The desired outcome is for the red boxes to be arranged horizontally with spacing between them, and for the signin/signup button to be clearly visible against the blue background of the header.
header {
background-color: Blue;
color: yellow;
margin-top: -21px;
margin-left: -10px;
border-bottom-left-radius: 25px;
border-bottom-right-radius: 25px;
}
nav ul {
list-style: none;
position: relative;
float: right;
}
/* red box */
#a {
width: 100px;
height: 100px;
background: red;
float: left;
padding-right: .6em;
margin: 1em 0;
}
/* red box */
#b {
width: 100px;
height: 100px;
background: red;
float: ;
padding-right: .6em;
margin: 1em 0;
}
/* red box */
#c {
width: 100px;
height: 100px;
background: red;
float: right;
padding-right: .6em;
margin: 1em 0;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>ABC</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<header>
<h1>ABC</h1>
<!-- signin/signup -->
<nav>
<ul>
<li><button type="button" name="signin/signup">signin/signup</button></li>
</ul>
</nav>
</header>
<body>
<!-- Video -->
<video>
<source src="Welcome.mp4" type="video/mp4">
</video>
<!-- 3 informational red boxes -->
<div class="">
<ul>
<li id="a"></li>
<li id="b"></li>
<li id="c"></li>
</ul>
</div>
</body>
</html>