As I continue to learn HTML and CSS, I have explored various options but still haven't found the answer I need. In order to seek help, I am sharing my HTML and CSS code snippets here. Any assistance provided would be greatly appreciated.
Below is my HTML code:
<!DOCTYPE html>
<html>
<head>
<title>MyRide|Home</title>
<link rel="stylesheet" href="../css/new.css"/>
</head>
<body>
<div class="cover-image heading">
<header>
<img src="../images/headerLogo.png" alt="logo" width="25%" height="10%">MyRide
</header>
<nav>
<ul id="ul1">
<li class="navbar"><a href="./home.html" class="li1">Home</a></li>
<li class="navbar"><a href="./fleet.html"class="li1">Fleet</a></li>
<li class="navbar"><a href="./services.html"class="li1">Services</a></li>
<li class="navbar"><a href="./about.html"class="li1">About</a></li>
<li class="navbar"><a href="./contact.html"class="li1">Contact Us</a></li>
</ul>
</nav>
</div>
</body>
</html>
And this is my CSS code:
*{
margin:0;
padding: 0;
}
body{
font-family: Arial, Helvetica, sans-serif;
color:darkgray;
flex: 10;
}
.cover-image{
background-image: url(../images/headercover.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position-y: center;
background-color: black;
padding-top: 1%;
padding-bottom: 1%;
}
.heading{
color: red;
font-size: 90px;
}
a.li1{
text-decoration: none;
color: gold;
}
header,nav{
margin: 0;
}
.navbar{
padding-right: 5px;
display: inline;
font-size: 28px;
margin:0;
}
#ul1{
list-style: none;
display: inline-block;
list-style-type: none;
align-content: end;
margin-top: 0;
padding: 0;
}
Having shared the above code snippets, when I view my webpage, the link here is how I want it to appear (indicated by a green line). It appears that the UL element is causing an unwanted new line after the heading, but I'm struggling to find a solution to remove it.