Nav bar issues

im trying to get a picture .png to line up with my inline nav menu
not having much luck

trying to do it in css but all my attempts break on browser resize :frowning:

<div class=“navcontain”>
<a href=“Index.html”> <img src=“Images/nav.png” width=“250px” height=“” alt=“logo” /></a>

   &lt;ul class="navigation"&gt;

        		&lt;li&gt;&lt;a href="Services.html" alt="Popular services"&gt; Services&lt;/a&gt;&lt;/li&gt;
       		&lt;li&gt;&lt;a href="Portfolio.html"alt="Popular services"&gt;Portfolio&lt;/a&gt;&lt;/li&gt;
        		&lt;li&gt;&lt;a href="About.html"alt="Popular services"&gt;About us&lt;/a&gt;&lt;/li&gt;	
      		&lt;li&gt;&lt;a href="Contact-us.html" alt="Popular services"&gt; Contact &lt;/a&gt; &lt;/li&gt;	 		   			    				 				

width: 980px;
margin:0px auto 30px;

.navigation li

.navigation a
padding: 0 15px;
font-size:26px ;

.navigation a:hover

got it just got to centre it now --see new post

I would have to see the complete HTML and CSS to give a 100% certain answer… but let’s start by fixing what is glaring wrong in your code, maybe that will solve the immediate issue.

  1. <img src=“Images/nav.png” width= 250 alt=“logo” />, there is also some dispute about this but many coders believe you shouldn’t put an inline element as a sibling to a block element, just saying.

  2. This wont work: .navigation li{width:800px;} You cant set explicit dimensions on INLINE elements ( neither height nor width!!), also… 800px PER EACH LI??? SRSLY??? I am going to guess that you meant .navigation to be 800px;

  3. .navigation a{font-size:26px ;} is not wrong, but it’s generally a bad idea… just a heads up

  4. Again, not wrong but I am wondering since I cant see you page in action… why center .navigation and not navcontain?

		<style type="text/css">
  .navcontain{width: 980px; margin:0px auto 30px auto;  }
.navcontain a img{border:none;  }
.navcontain ul, .navcontain ul li, .logo, .logo img    {list-style:none; display:inline; vertical-align:middle;}
.navcontain li a{ padding: 0 1em; text-decoration:none; font-size:1.67em ;color:#FFF;}
.navcontain li a:hover{color:#F90;}

<div class="navcontain">
 <a href="Index.html" class="logo"> <img src="Images/nav.png" width= 250   height=50 alt="logo" /></a>
<li><a href="Services.html" alt="Popular services"> Services</a></li>
<li><a href="Portfolio.html"alt="Popular services">Portfolio</a></li>
<li><a href="About.html"alt="Popular services">About us</a></li>
<li><a href="Contact-us.html" alt="Popular services"> Contact </a> </li>
</div> 	</body>

hope that helps