background image responsive but menu no : when page is resizing menu and content is decreases faster than image and when page have larger width than picture picture is alighed on left side 

on normal resizing on pc site is normal image no but when it is on mobile or mobile mode on pc is it broken 


i tried 
background-size: 100% auto;
background-size: cover;



and nothing works so help me plz i need it thx

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    /* font-family: 'Montserrat', sans-serif; */

    body {
        background: #000;
        font-family: 'Lato', sans-serif;
    }

    header {
        width: 100%;
        background: #fff;
    }

    nav > * {
        list-style: none;
    }

    nav {
        max-width: 960px;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 10px;
    }

    ul {
        padding: 0;
    }

    nav > ul {
        display: flex;
        flex-direction: row;
    }

    .logo {
        background: url('../img/01.png') no-repeat;
        width: 150px;
        height: 50px;
    }

    .menu {
        display: flex;
        text-decoration: none;
        margin: 0 10px 0 10px;

        color: #3a3b3b;
    }

    .menu:hover {
        color: #d96e5d;
        transition: all 0.5s ease;
    }

    strong.menu {
        font-weight: normal;
        color: #d96e5d;
    }

    .top-bg {
        background: url('../img/topbg.jpg') no-repeat;
        background-size: cover;
    }

    .top-img > h1 {
        font-family: 'Montserrat', sans-serif;
        text-transform: uppercase;
        color: white;
    }

    .content {
        position: absolute;
        top: 800px;
        color: white;
        font-size: 80px;
    }

    @media ( max-width:500px ) {
        nav > ul {
            flex-direction: column;
            align-items: center;
        }

        nav {
            flex-direction: column;
            align-items: center;
        }


        .item{
            padding: 10px;
            width: 90vw;
            background: #d3d0d0;
            margin: 2px 0 2px 0;
        }

        .menu {
            justify-content: center;
        }    
    }

<!-- language: lang-html -->

    <header>
    		<nav>
    			<a class="logo" href="#"></a>

    				<ul>
    					<li class="item"><a href="aktivity.php" class="menu">Aktivity</a></li><li class="item"><strong class="menu">Index</strong></li><li class="item"><a href="kontakt.php" class="menu">Kontakt</a></li><li class="item"><a href="onas.php" class="menu">Onas</a></li>					
    				</ul>

    		</nav>
    	</header>
    	<main>	
    	<section class="topimg">
    		<h1>Coupe Invest</h1>
    		<img src="assets/img/topbg.jpg" alt="background">
    	</section>

    	<section class="content">
    		<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem a et laboriosam illum recusandae nesciunt veniam architecto saepe ratione! Eaque quas provident voluptates facere consectetur repellendus amet nulla ea nisi! Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur odio, quos suscipit laudantium quo doloribus nulla sit ut cupiditate mollitia nihil maiores. Vitae ipsum excepturi quibusdam nam molestias ullam! Enim. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque, ut amet laboriosam quaerat, expedita nam neque placeat molestias non hic sit voluptate quam quia beatae nulla rem est eius fugiat. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi fugiat, cumque distinctio consequuntur asperiores quia veniam suscipit tenetur, nobis adipisci ad voluptate quisquam ducimus nesciunt id, voluptatem odio neque molestias. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus aliquid eum adipisci quaerat ducimus pariatur natus velit voluptates! Odit amet tempora quisquam mollitia fugit aliquam neque vitae molestiae debitis aperiam?</p>
    	</section>

    	</main>

<!-- end snippet -->

