* {
margin: 0px;
padding: 0px;
}

.col-md-10 {
height: 100vh;
left: 50%;
transform: translateX(-50%);
}

.row1 {
background-image: url("banner.jpg");
background-repeat: no-repeat;
background-color: #ddd;
height: 25vh;
}

.row2 {

height: 5vh;
background-color: #000000;
}

.row3 {
height: 70vh;
background-color: #66ffff;
}

<!DOCTYPE html>
<html>
<head>

<link rel="stylesheet" type="text/css" href="css/style.css">

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Romania</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstr ... ap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstr ... me.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstr ... rap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>


</head>

<body background="img/bg.jpg">

<div class="container">

<div class="row container-fluid">

<div class="col-md-10">

<div class="row1">


</div>

<div class="row2">
<style type="text/css">
ul {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li {
float:left;
}
a:link,a:visited {
display:block;
width:230px;
font-weight:bold;
font-size:25px;
color:#ffffff;
background-color:#d2691e;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active {
background-color:#0e0070;
}
</style>
</head>

<ul>
<li><a href="#">ACASA</a></li>
<li><a href="#">INFORMATII</a></li>
<li><a href="#">IMAGINI</a></li>
<li><a href="#">CONTACTE</a></li>
</ul>

</div>

<div class="row3">



</div>

</div>

</div>

</div>

</body>

</html>