#logo {
position: relative;
display: block;
width: 125px;
height: 30px;
margin-top: 25px;
}
Thank you! However, now I need to move it slightly to the left as it overlapping.by the looks of the logo it probably has a static width set in the css ruleset for that specific element. I recommend using the Google Chrome element inspector found within the dev tools (press F12 while using Google Chrome).
When you have opened dev tools, look in the top left side, there you will see a zoom glass icon, click on it then click on your logo; After you have done this the CSS documents related to that element will be displayed in the right side of the dev tools.
You should be able to locate the static width in there. Example of how it could look if you are completely new to CSS.
Code:#logo { position: relative; display: block; width: 125px; height: 30px; margin-top: 25px; }
With my example case above you would just tweak the "width" until you find something that fits your logo width.
Hope this was helpful.
#logo {
display: block;
width: 150px;
height: 30px;
margin-left: 15px;
}
Thank you!Seeing as your navigation/menu bar below is perfectly aligned with your logo as it is right now I would probably look in to re-creating/adjusting your logo image by making it smaller so it fits with your current design.
But if you insist to still change the margins, you can add a margin-left property to your logo to move it to the left.
This tip/suggestion is based on that the other design elements allows your logo to be adjusted without ruining anything around it.
Example:
Code:#logo { display: block; width: 150px; height: 30px; margin-left: 15px; }