My logo isn't moving within the nav bar no matter what I try. I've attempted using !important and setting various properties, but it remains stuck in place. Can anyone provide insight into what might be causing this issue? Additionally, the text on the nav bar won't change color to black. Thank you in advance.
.top {
background-image: url("first-background-2.png");
object-position: center;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: cover;
padding-bottom: 300px;
height: 920px;
}
#logo {
text-align: left !important;
opacity: 80%;
float: left;
height: 600px;
top: 60px;
left: 60px
}
.text {
padding-right: 20px!important;
color: black !important;
font-size: 30px;
font-weight: bold;
text-align: right;
word-spacing: 20px;
}
#topnav {
background-color: white;
width: 100%;
height: 100px;
padding-top: 60;
opacity: 60%;
position: relative;
top: -1150px;
display: inline-block;
}<!docktype html>
<html>
<body>
<head>
<style type="text/css">
body {
margin: 0;
}
</style>
<link href="edusolut.css" type="text/css" rel="stylesheet">
<title>Edusolut</title>
</head>
<nav id="top bar">
<div class="top">
</div>
<!-- navbar-->
<div id="topnav">
<div id="logo">
<img src="./logo2.png" width="auto" height="162 pt" alt="edusolut logo">
</div>
<nav class="text">
<a class="active" href="#top">Home</a>
<a href="#news">Training</a>
<a href="#contact">Contact</a>
<a href="#about">Service</a>
</nav>
</div>
</nav>
<!-- end navbar-->