CSS layout issue, elements mount together

Someone showed me these code. There are a few weird places but I just want to know why the logo image and the navigation area mount together? Could anyone help please?

I’ve tried to change a few weird places but it seems that they are not the cause.

Top is what is going on now, bottom is what we want to eventually achieve:

Below is the original code she sent to me:

<!doctype html>
<meta charset="utf-8">

    <style type="text/css">
	.header {
	width: 100%;
	height: 140px;
	background-color: #FFF3CA;
	margin-left: auto;
	margin-right: auto;
.header .logo {
	width: 180px;
	height: 50px;
	margin-left: auto;
	margin-right: auto;
.header .nav {
	width: 480px;
	height: 27px;
	background-color: #E0FFB7;
	margin-left: auto;
	margin-right: auto;

<div class="header">
  <div class="logo"><a href="#"><img src="img/main-logo.png" width="185" alt=""/></a></div>
  <div class="nav">



the images are local, so when putting code in a bin, the image doesn’t show. Please provide a working example (with working image)

1 Like

i put a border around the image:


and the navigation menu is below the image, but the image look to have more height (in screenshot) so the problem seems to be a lack of space for the image and navigation to sit below each other.


The logo image: main-logo

Thank you, I just saw your answer going to have a look now.

Yep, just changed the height of logo to auto, and it works fine now. Cheers.

or the parent element (<div class="header"></div>) should have more height, either way, that was the problem, good you solved it :slight_smile:

1 Like