I'm having trouble adjusting the width of my body to match the size of my Nexus 4 screen, which is supposedly 768px. However, I notice that when the phone is upright, I can still scroll to the right quite a bit... Even if I reduce the width to 384px, there is still some extra scrolling space...
Currently, I am utilizing Bootstrap for this project.
HTML:
<body>
<div class="container">
<h1>Heading</h1>
</div>
<div class="container">
<button class="btn btn-primary">Settings</button>
</div>
<div class="container">
<button class="btn-primary">Received Messages</button>
</div>
CSS:
body {
background-image: url("wooden-floor.jpg");
width:384px;
text-align: center;
}
button {
margin-top:25px;
}
.container {
width:384px;
}
If anyone has any suggestions on how to resolve this issue, I would greatly appreciate it.
Thank you.