Site resolution created in HTML+CSS exceeds 100% of screen

Question

Site resolution created in HTML+CSS exceeds 100% of screen

Asked 4 years, 8 months ago

Viewed 124 times

-1

Hello, I am really learning how to work with HTML, CSS and JS and I am facing a resolution problem. At least I think it has to do with resolution.

The site has created a horizontal scroll bar and no longer has the resolution of 100% of the screen. However, I have no idea where this came from. Because, from what I understand so far performing the programming steps, everything is ok.

Follow images for better understanding:

Does anyone know what can lead to this mistake?

@font-face {
	font-family: 'Maven-Pro';
	src: url("../arqs/Fonts/MavenPro-Medium.ttf");
	font-size: 1em;
}

@font-face {
	font-family: 'Maven-Pro-Regular';
	src: url("../arqs/Fonts/MavenPro-Regular.ttf");
	font-size: 1em;
}

header {
	width: 100%;
	height: 150px;
	background: rgba(94, 41, 154, .85);
	z-index: 2;
	position: relative;
}

header .container {
	color: #fff;
	width: 85%;
	position: relative;
}

header .header-black {
	background: #000;
	height: 40px;
}

header .header-black li {
	background-image: url("../arqs/Png/clubs.png");
	background-repeat: no-repeat;
	display: inline-block;
	margin: 4px 12px;
}

header .header-black li.club-01 {
	background-position: 0px;
}
header .header-black li.club-02 {
	background-position: -48px;
}
header .header-black li.club-03 {
	background-position: -95px;
}
header .header-black li.club-04 {
	background-position: -140px;
}
header .header-black li.club-05 {
	background-position: -188px;
}
header .header-black li.club-06 {
	background-position: -238px;
}
header .header-black li.club-07 {
	background-position: -287px;
}
header .header-black li.club-08 {
	background-position: -334px;
}
header .header-black li.club-09 {
	background-position: -381px;
}
header .header-black li.club-10 {
	background-position: -429px;
}
header .header-black li.club-11 {
	background-position: -480px;
}
header .header-black li.club-12 {
	background-position: -529px;
}
header .header-black li.club-13 {
	background-position: -578px;
}
header .header-black li.club-14 {
	background-position: -630px;
}
header .header-black li.club-15 {
	background-position: -675px;
}
header .header-black li.club-16 {
	background-position: -720px;
}
header .header-black li.club-17 {
	background-position: -764px;
}
header .header-black li.club-18 {
	background-position: -808px;
}
header .header-black li.club-19 {
	background-position: -857px;
}
header .header-black li.club-20 {
	background-position: -904px;
}
header .header-black li.club-21 {
	background-position: -949px;
}
header .header-black li.club-22 {
	background-position: -1000px;
}

header .header-black li a {
	width: 32px;
	height: 32px;
	display: block;
}

header #logotipo {
	position: absolute;
	top: -35px;
}

#menu {
	position: absolute;
	right: 0;
	font-family: 'Maven-Pro'
}

.menu {
	margin: 0;
}

#menu li {
	display: inline-block;
	padding: 40px 0px 40px 50px;
}

#menu li a {
	color: white;
	font-size: 20px;
}

#menu li.search-input {
	width: 350px;
	margin-right: 0;
}

#menu li.search-input input {
	background-color: #512186;
	color: #fff;
	border: none;
	height: 30px;
	line-height: 30px;
}

#menu li.search-input ::-webkit-input-placeholder {
	color: #fff;
}

#menu li.search-input button {
	background: none;
	border: none;
	position: relative;
}

#menu li.search-input button i {
	font-size: 14px;
	color: rgba(255, 255, 255, .5);
	position: absolute;
	right: -200px;
    top: -22px;
}

#banner {
	width: 100%;
	height: 1048px;
	position: relative;
	top: -280px;
	background-size: cover;
}

#txtbanner {
	font-size: 98px;
	top: -707px;
	left: 135px;
	color: #fff;
	position: relative;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, .45);
	font-family: 'Maven-Pro-Regular';

}

#txtbanner small {
	font-size: 38px;
	color: #fff;
	display: block;
	font-weight: bold;
}

#news {
	top: -400px;
	position: relative;
}

#news h2 {
	font-family: 'Maven-Pro-Regular';
	font-size: 48px;
	color: #5e299a;
	text-align: center;
	text-transform: uppercase;
	position: relative;
}

#news hr {
	border: #fde192 solid 3px;
	width: 200px;
	top: -13px;
	position: relative;
}

#news .thumbnails {
	margin-top: 26px;
	position: relative;
}

#news .thumbnails h3 {
	font-family: 'Maven-Pro-Regular';
	font-weight: bold;
	font-size: 18px;
	color: #5e299a;
	margin-top: 10px;
	margin-bottom: 0px;
}

#news .thumbnails time {
	font-family: 'Maven-Pro-Regular';
	font-size: 15px;
	color: #b7b7b7;
}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="lib/bootstrap-OC/css/bootstrap.min.css">
		<link rel="stylesheet" href="css/orlando.css">
		<script src="https://kit.fontawesome.com/2d8191dca3.js" crossorigin="anonymous"></script>
		<title>Orlando City</title>
	</head>
	<body>
		<header>
			<div class="header-black">
				<div class="container">
					<ul class="pull-right">
						<li class="club-01"><a href=""></a></li>
						<li class="club-02"><a href=""></a></li>
						<li class="club-03"><a href=""></a></li>
						<li class="club-04"><a href=""></a></li>
						<li class="club-05"><a href=""></a></li>
						<li class="club-06"><a href=""></a></li>
						<li class="club-07"><a href=""></a></li>
						<li class="club-08"><a href=""></a></li>
						<li class="club-09"><a href=""></a></li>
						<li class="club-10"><a href=""></a></li>
						<li class="club-11"><a href=""></a></li>
						<li class="club-12"><a href=""></a></li>
						<li class="club-13"><a href=""></a></li>
						<li class="club-14"><a href=""></a></li>
						<li class="club-15"><a href=""></a></li>
						<li class="club-16"><a href=""></a></li>
						<li class="club-17"><a href=""></a></li>
						<li class="club-18"><a href=""></a></li>
						<li class="club-19"><a href=""></a></li>
						<li class="club-20"><a href=""></a></li>
						<li class="club-21"><a href=""></a></li>
						<li class="club-22"><a href=""></a></li>
					</ul>
				</div><!-- Times -->
			</div>

			<div class="container"><!-- Menu e Searh -->
				<div class="row">
					<nav id="menu">
						<ul class="menu">
							<li><a href="">Tickets</a></li>
							<li><a href="">News</a></li>
							<li><a href="">Schedule</a></li>
							<li class="search-input">
								<div class="container">
									<input type="text" class="form-control" placeholder="Search...">
							    	<span class="input-group-btn">
							      		<button class="button" type="button"><i class="fas fa-search"></i></button>
							    	</span>
							    </div><!-- /input-group -->
							</li>
						</ul>
					</nav>
				</div><!-- Menu e Searh -->
			</div>

			<div class="container">
				<img src="arqs/Png/orlando-logo.png" alt="Orlando-City-Logo" id="logotipo">
			</div>
		</header>

		<section><!--banner central + News-->
			<div>
				<img src="arqs/Png/banner.jpg" id="banner">
				<h1 id="txtbanner">Orlando City<small>Orlando City soccer club</small></h1>
			</div>

			<div id="news" class="container">

				<div class="row">
					<h2>Latest News</h2>
					<hr>
				</div>

				<div class="row thumbnails"><!--foto e título news-->
					<div class="col-md-3">

						<img src="arqs/Png/noticia-thumb.jpg" alt="Notícias">
						<h3>Orlando City acquires Goalkeeper Joe Bendik from Toronto FC</h3>
						<time>December 21, 2015</time>

					</div>
					<div class="col-md-3">
						
						<img src="arqs/Png/noticia-thumb.jpg" alt="Notícias">
						<h3>Orlando City acquires Goalkeeper Joe Bendik from Toronto FC</h3>
						<time>December 21, 2015</time>

					</div>
					<div class="col-md-3">
						
						<img src="arqs/Png/noticia-thumb.jpg" alt="Notícias">
						<h3>Orlando City acquires Goalkeeper Joe Bendik from Toronto FC</h3>
						<time>December 21, 2015</time>

					</div>
					<div class="col-md-3">
						
						<img src="arqs/Png/noticia-thumb.jpg" alt="Notícias">
						<h3>Orlando City acquires Goalkeeper Joe Bendik from Toronto FC</h3>
						<time>December 21, 2015</time>

					</div>
				</div>
				
			</div>
		</section>


		<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
		<script src="lib/bootstrap-OC/js/bootstrap.min.js"></script>
	</body>
</html>

Cool, I’ll post the code below. Sorry I’m new here

– Psycintra

2019/10/09 at 18:19
It is important to reduce the code to a [mcve]. More details on the link provided.

– Bacco

2019/10/09 at 18:26

2 answers

0

You used left in an element that is 100% the width of the screen. In the case of H1 with the text you put a left, and that’s left which gave the unwanted space, since by default the H1 is 100% the width of container, it ended up with 100% + the value of left that you put.

Enough in #txtbanner { left: 135px; } you trade for #txtbanner { margin-left: 135px; } that will solve

Very good Hugo, that’s right! Now I’ve even understood the difference between the left and the margin-left or other directions. Thank you very much!!

– Psycintra

2019/10/09 at 19:59
@Psycintra cool guy who helped you, if you consider that this answer solved the problem consider mark it as accepted by clicking on this icon below the arrows next to the answer, it was worth the force

– hugocsl

2019/10/09 at 20:25

Browser other questions tagged rolling screen-resolution

You are not signed in. Login or sign up in order to post.

by Cristian Benites • **133** points · Answer 1 · 2019-10-09T19:26:22+00:00

The horizontal bar is an automatic feature of the browser to show the whole screen. Some element of your code is occupying that space. You can use the inspection options (Ctrl+Shift+I in Chrome). There you can debug your code, element by element, and check if it is width problem, padding, margin problem, or whatever.