.navbar {
background-color: #808080;
}
.jumbotron{
color: #ffffff;
min-height: 580px;
}
.container {
padding-right: 10px;
padding-left: 15px;
margin-right: AUTO;
margin-left: auto;
}
<!DOCTYPE html>
<html lan="en">
<head>
<title>zvoid</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<style>
.navbar {
background-color: #808080;
}
.jumbotron{
color: #ffffff;
min-height: 580px;
}
.container {
padding-right: 10px;
padding-left: 15px;
margin-right: AUTO;
margin-left: auto;
}
</style>
</head>
<body>
<nav id="myNavbar" class="navbar navbar-expand-sm navbar-dark" role="navigation">
<div class="container">
<a class="navbar-brand" href="#"><img src="Stuff/logo here.png"></a>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)"></a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">about</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">meni</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">usefulinfo</a>
</li>
<li class="nav-item">
<a class="nav-link" href="javascript:void(0)">contact</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron text-center" style="background-color:#808080; width:100%;">
<br><br><br><br><br><br>
<h2>catering service for all occations</h2>
<h1>just dial and book your service now!<br>
(880)1245 657 9875
</h1>
</div>
<div class="container">
<div class="row">
<div class="col-sm-3">
<center>
<img class="border border-primary rounded-circle" src="Stuff/frame.png"><br><br>
<h3>fresh</h3>
</center>
</div>
<div class="col-sm-3">
<center>
<img src="Stuff/frame.png"><br><br>
<h3>delicios</h3>
</center>
</div>
<div class="col-sm-3">
<center>
<img src="Stuff/frame.png"><br><br>
<h3>testy</h3>
</center>
</div>
<div class="col-sm-3">
<center>
<img src="Stuff/frame.png"><br><br>
<h3>healthy</h3>
</center>
</div>
</div>
</div>
<br><br>
<div class="row">
<div class="col-sm-5" ><div style="background-color:#808080; height:600px;"></div>
</div>
<div class="col-sm-7" style="padding-left:30px;"><br><br><br><br><br><br><br>
<h1 style="color:#e6ac00;">panshi the best<br>catering service in the city</h1><br>
<h3 >the best food make you feel good</h3>
<p style="font-size:20px">panshi the best for elit,sed do eiusmod tempor dolor sit amet,conse ctetur adiog<BR>
elite,sed do eiusmod tempor incididunt ut labore et lorna iquat minimam, is nostrud iono<BR>
oris nist aliquip ex ea on the other hand,we denounce with righteous indignation and a<BR>
ike men who are so beguild and demoralized by the charms</p><br>
<button type="button" class="btn" style="background-color:#e6ac00;color:white;"><b>ourder now</b></button>
</div>
</div>
<br><br><br><center>
<div class="container">
<h1 style="color:#e6ac00;">panshi the best</h1>
</div><br>
<div class="container">
<button type="button" class="btn btn-round" style="color:white;background-color:#e6ac00;margin-right:25px">package</button>
<button type="button" class="btn btn-default btn-round">banquet</button><br><br><br>
</div>
<br><br>
</center>
<div class="container">
<div class="row" >
<div class="col-sm-8" ><br><br><br>
<h1 style="color:#e6ac00;">panshi the best<br>catering service in the city</h1><br>
<h3 >the best food make you feel good</h3>
<p style="font-size:20px">panshi the best for elit,sed do eiusmod tempor dolor sit amet,conse ctetur adiog<BR>
elite,sed do eiusmod tempor incididunt ut labore et lorna iquat minimam, is nostrud iono<BR>
oris nist aliquip ex ea on the other hand,we denounce with righteous indignation and a<BR>
ike men who are so beguild and demoralized by the charms</p><br>
<button type="button" class="btn" style="background-color:#e6ac00;color:white;"><b>ourder now</b></button>
</div>
<div class="col-sm-4" ><img src="Stuff/image [email protected]" height="650">
</div>
</div>
</div>
</body>
</html> Try giving the .navbar-nav class a width of 100% on small devices such as:
@media (max-width: 480px) {
.navbar-nav {
width: 100%;
}
}