I have encountered a persistent issue with my CSS exercises where the first element inside the body tag, whether it's an image or heading, remains fixed at the top left corner of the page. It seems impossible to move it using margin adjustments or changing the element width. Despite trying to add a background color to test if modifications would work, nothing seems to affect this particular element.
Here is the HTML snippet:
<body>
<header class="Top">
<img src="img/logo.png" alt="NeoDance Logo" width="356" height="48" class="logo">
<nav class="NavBar">
<a href="" class="links">Home</a>
<a href="" class="links">About</a>
<a href="" class="links">Class schedules</a>
<a href="" class="links">Performances</a>
<a href="" class="links">Blog</a>
<a href="" class="links">Contact</a>
</nav>
<div class="ClearFix"></div>
</header>
And here is the associated CSS code:
header.Top{
width: 1440px;
margin: auto;
background-color: #303030;
overflow: hidden
}
div.wrapper
img.Logo{
margin-top: 35px;
margin-bottom: 35px;
margin-left: 250px;
margin: auto;
background-color: #303030;
}
nav.NavBar{
float: right;
width: 490px;
background-color: #303030;
list-style: none;
margin: auto;
margin-right: 250px
}
a.links{
float: right;
font-size: 15pt;
font-family: 'Muli', sans-serif;
color: #8c8c8c;
margin-top: 50px;
margin-right: 18px;
}
div.container 1{
width: 490px;
clear: both
}
img.dancers{
float: right;
}
div.ClearFix{
clear: both;
}
The CSS specifies margins for the img.logo element, which are not being applied as expected. The issue can be seen in the following image: Problem