Nu Html Checker
This tool is an ongoing experiment in better HTML checking, and its behavior remains subject to change

Showing results for contents of text-input area
Checker Input
Show sourceoutlineimage report

Check by
text input
CSS
* {
	box-sizing: border-box;
}

header,
nav,
main,
footer {
	display: block;
}

body {
	background-image: url("background.gif");
	background-color: #FCEBB6;
	color: #221811;
	font-family: Verdana;
}

#wrapper {
	background-color: #231814;
	min-width: 900px;
	max-width: 1280px;
	box-shadow: 2px 2px;
	width: 80%;
	margin-right: auto;
	margin-left: auto;
}

header {
	background-color: #D2B48C;
	height: 150px;
	background-image: url("javajamlogo.jpg");
	background-repeat: no-repeat;
}

h1 {
	padding-top: 45px;
	padding-left: 220px;
	font-size: 3em;
}

nav {
	text-align: center;
	font-weight: bold;
	font-size: 1.5em;
	padding-top: 10px;
	float: left;
	width: 200px;
}

nav a {
	text-decoration: none;
}

nav a:link {
	color: #FEF6C2;
}

nav a:visited {
	color: #D2B48C;
}

nav a:hover {
	color: #CC9933;
}

nav ul {
	padding-left: 0;
	list-style-type: none;
}

footer {
	background-color: #D2B48C;
	font-size: 0.60em;
	text-align: center;
	font-style: italic;
	padding-bottom: 10px;
	border-top: 2px solid #221811
}

h4 {
	background-color: #D2B48C;
	font-size: 1.2em;
	padding-left: 0.5em;
	padding-bottom: 0;
	text-transform: uppercase;
	border-bottom: solid;
	clear: left;
}

main {
	padding-left: 0em;
	padding-right: 0em;
	padding-bottom: 2em;
	padding-top: 0em;
	display: block;
	margin-left: 200px;
	margin-bottom: 0;
	background-color: #FEF6C2;
}

.details {
	padding-left: 20%;
	padding-right: 20%;
	overflow: auto;
}

img {
	padding-left: 10px;
	padding-right: 10px;
}

#heroroad {
	background-image: url("heroroad.jpg");
	background-size: 100% 100%;
	height: 250px;
}

#heromugs {
	background-image: url("heromugs.jpg");
	background-size: 100% 100%;
	height: 250px;
}

#heroguitar {
	background-image: url("heroguitar.jpg");
	background-size: 100% 100%;
	height: 250px;
}

#herojobs {
	background-image: url("herojobs.jpg");
	background-size: 100% 100%;
	height: 250px;
}

#mobile {
	display: none;
}

#desktop {
	display: inline;
}

main h2,
main h3,
main h4,
main p,
main div,
main ul,
main dl {
	padding-left: 3em;
	padding-right: 2em;
}

.floatleft {
	float: left;
	padding-right: 2em;
	padding-bottom: 2em;
}

table {
	margin: auto;
	width: 90%;
	border-spacing: 0;
}

td,
th {
	padding: 10px;
}

tr:nth-of-type(odd) {
	background-color: #D2B48C;
}

form {
	padding: 2em;
}

label {
	float: left;
	display: block;
	text-align: right;
	width: 8em;
	padding-right: 1em;
}

input,
textarea {
	display: block;
	margin-bottom: 1em;
}

.mySubmit {
	margin-left: 9.5em;
}

audio {
	display: block;
	margin-top: 1em;
}

@media only screen and (max-width: 1024px) {
	body {
		margin: 0;
		background-image: none;
	}
	#wrapper {
		width: auto;
		min-width: 0;
		margin: 0;
		padding: 0;
		box-shadow: none;
	}
	header {
		border-bottom: 5px solid #FEF6C2;
	}
	h1 {
		margin-top: 0;
		margin-bottom: 1em;
		padding-top: 1em;
		padding-bottom: 1em;
		font-size: 2.5em;
	}
	nav {
		float: none;
		width: auto;
		padding-top: 0;
		margin: 10px;
		font-size: 1.3em;
	}
	nav li {
		display: inline-block;
	}
	nav a {
		display: inline-block;
		padding: 0.2em;
		width: 8em;
		font-weight: bold;
		border-style: none;
	}
	nav ul {
		padding: 0;
		margin: 0;
	}
	#heroroad {
		padding: 0;
		margin: 0;
	}
	#heromugs {
		padding: 0;
		margin: 0;
	}
	#heroguitar {
		padding: 0;
		margin: 0;
	}
	#herojobs {
		padding: 0;
		margin: 0;
	}
	main {
		margin: 0;
		font-size: 90%;
	}
}

@media only screen and (max-width: 768px) {
	header {
		background-image: url("javajammini.jpg");
	}
	h1 {
		font-size: 2em;
		text-align: center;
		padding-left: 0;
	}
	nav {
		margin: 0;
	}
	nav a {
		display: block;
		padding: 0.2em;
		width: auto;
		border-bottom: 1px solid #FEF6C2;
	}
	nav li {
		display: block;
	}
	main {
		padding-top: 1px;
	}
	h2 {
		padding-top: 0.5em;
		padding-right: 0;
		padding-bottom: 0;
		padding-left: 0.5em;
		margin-right: 0.5em;
	}
	.details {
		padding-left: 0;
		padding-right: 0;
	}
	#heroroad {
		background-image: none;
		height: auto;
	}
	#heromugs {
		background-image: none;
		height: auto;
	}
	#heroguitar {
		background-image: none;
		height: auto;
	}
	#herojobs {
		background-image: none;
		height: auto;
	}
	.floatleft {
		padding-left: 0.5em;
		padding-right: 0.5em;
	}
	#mobile {
		display: inline;
	}
	#desktop {
		display: none;
	}
}
Use the Message Filtering button below to hide/show particular messages, and to see total counts of errors and warnings.
Message Filtering
Document checking completed. No errors or warnings to show.

Source
* {↩
	box-sizing: border-box;↩
}↩
↩
header,↩
nav,↩
main,↩
footer {↩
	display: block;↩
}↩
↩
body {↩
	background-image: url("background.gif");↩
	background-color: #FCEBB6;↩
	color: #221811;↩
	font-family: Verdana;↩
}↩
↩
#wrapper {↩
	background-color: #231814;↩
	min-width: 900px;↩
	max-width: 1280px;↩
	box-shadow: 2px 2px;↩
	width: 80%;↩
	margin-right: auto;↩
	margin-left: auto;↩
}↩
↩
header {↩
	background-color: #D2B48C;↩
	height: 150px;↩
	background-image: url("javajamlogo.jpg");↩
	background-repeat: no-repeat;↩
}↩
↩
h1 {↩
	padding-top: 45px;↩
	padding-left: 220px;↩
	font-size: 3em;↩
}↩
↩
nav {↩
	text-align: center;↩
	font-weight: bold;↩
	font-size: 1.5em;↩
	padding-top: 10px;↩
	float: left;↩
	width: 200px;↩
}↩
↩
nav a {↩
	text-decoration: none;↩
}↩
↩
nav a:link {↩
	color: #FEF6C2;↩
}↩
↩
nav a:visited {↩
	color: #D2B48C;↩
}↩
↩
nav a:hover {↩
	color: #CC9933;↩
}↩
↩
nav ul {↩
	padding-left: 0;↩
	list-style-type: none;↩
}↩
↩
footer {↩
	background-color: #D2B48C;↩
	font-size: 0.60em;↩
	text-align: center;↩
	font-style: italic;↩
	padding-bottom: 10px;↩
	border-top: 2px solid #221811↩
}↩
↩
h4 {↩
	background-color: #D2B48C;↩
	font-size: 1.2em;↩
	padding-left: 0.5em;↩
	padding-bottom: 0;↩
	text-transform: uppercase;↩
	border-bottom: solid;↩
	clear: left;↩
}↩
↩
main {↩
	padding-left: 0em;↩
	padding-right: 0em;↩
	padding-bottom: 2em;↩
	padding-top: 0em;↩
	display: block;↩
	margin-left: 200px;↩
	margin-bottom: 0;↩
	background-color: #FEF6C2;↩
}↩
↩
.details {↩
	padding-left: 20%;↩
	padding-right: 20%;↩
	overflow: auto;↩
}↩
↩
img {↩
	padding-left: 10px;↩
	padding-right: 10px;↩
}↩
↩
#heroroad {↩
	background-image: url("heroroad.jpg");↩
	background-size: 100% 100%;↩
	height: 250px;↩
}↩
↩
#heromugs {↩
	background-image: url("heromugs.jpg");↩
	background-size: 100% 100%;↩
	height: 250px;↩
}↩
↩
#heroguitar {↩
	background-image: url("heroguitar.jpg");↩
	background-size: 100% 100%;↩
	height: 250px;↩
}↩
↩
#herojobs {↩
	background-image: url("herojobs.jpg");↩
	background-size: 100% 100%;↩
	height: 250px;↩
}↩
↩
#mobile {↩
	display: none;↩
}↩
↩
#desktop {↩
	display: inline;↩
}↩
↩
main h2,↩
main h3,↩
main h4,↩
main p,↩
main div,↩
main ul,↩
main dl {↩
	padding-left: 3em;↩
	padding-right: 2em;↩
}↩
↩
.floatleft {↩
	float: left;↩
	padding-right: 2em;↩
	padding-bottom: 2em;↩
}↩
↩
table {↩
	margin: auto;↩
	width: 90%;↩
	border-spacing: 0;↩
}↩
↩
td,↩
th {↩
	padding: 10px;↩
}↩
↩
tr:nth-of-type(odd) {↩
	background-color: #D2B48C;↩
}↩
↩
form {↩
	padding: 2em;↩
}↩
↩
label {↩
	float: left;↩
	display: block;↩
	text-align: right;↩
	width: 8em;↩
	padding-right: 1em;↩
}↩
↩
input,↩
textarea {↩
	display: block;↩
	margin-bottom: 1em;↩
}↩
↩
.mySubmit {↩
	margin-left: 9.5em;↩
}↩
↩
audio {↩
	display: block;↩
	margin-top: 1em;↩
}↩
↩
@media only screen and (max-width: 1024px) {↩
	body {↩
		margin: 0;↩
		background-image: none;↩
	}↩
	#wrapper {↩
		width: auto;↩
		min-width: 0;↩
		margin: 0;↩
		padding: 0;↩
		box-shadow: none;↩
	}↩
	header {↩
		border-bottom: 5px solid #FEF6C2;↩
	}↩
	h1 {↩
		margin-top: 0;↩
		margin-bottom: 1em;↩
		padding-top: 1em;↩
		padding-bottom: 1em;↩
		font-size: 2.5em;↩
	}↩
	nav {↩
		float: none;↩
		width: auto;↩
		padding-top: 0;↩
		margin: 10px;↩
		font-size: 1.3em;↩
	}↩
	nav li {↩
		display: inline-block;↩
	}↩
	nav a {↩
		display: inline-block;↩
		padding: 0.2em;↩
		width: 8em;↩
		font-weight: bold;↩
		border-style: none;↩
	}↩
	nav ul {↩
		padding: 0;↩
		margin: 0;↩
	}↩
	#heroroad {↩
		padding: 0;↩
		margin: 0;↩
	}↩
	#heromugs {↩
		padding: 0;↩
		margin: 0;↩
	}↩
	#heroguitar {↩
		padding: 0;↩
		margin: 0;↩
	}↩
	#herojobs {↩
		padding: 0;↩
		margin: 0;↩
	}↩
	main {↩
		margin: 0;↩
		font-size: 90%;↩
	}↩
}↩
↩
@media only screen and (max-width: 768px) {↩
	header {↩
		background-image: url("javajammini.jpg");↩
	}↩
	h1 {↩
		font-size: 2em;↩
		text-align: center;↩
		padding-left: 0;↩
	}↩
	nav {↩
		margin: 0;↩
	}↩
	nav a {↩
		display: block;↩
		padding: 0.2em;↩
		width: auto;↩
		border-bottom: 1px solid #FEF6C2;↩
	}↩
	nav li {↩
		display: block;↩
	}↩
	main {↩
		padding-top: 1px;↩
	}↩
	h2 {↩
		padding-top: 0.5em;↩
		padding-right: 0;↩
		padding-bottom: 0;↩
		padding-left: 0.5em;↩
		margin-right: 0.5em;↩
	}↩
	.details {↩
		padding-left: 0;↩
		padding-right: 0;↩
	}↩
	#heroroad {↩
		background-image: none;↩
		height: auto;↩
	}↩
	#heromugs {↩
		background-image: none;↩
		height: auto;↩
	}↩
	#heroguitar {↩
		background-image: none;↩
		height: auto;↩
	}↩
	#herojobs {↩
		background-image: none;↩
		height: auto;↩
	}↩
	.floatleft {↩
		padding-left: 0.5em;↩
		padding-right: 0.5em;↩
	}↩
	#mobile {↩
		display: inline;↩
	}↩
	#desktop {↩
		display: none;↩
	}↩
}↩
Total execution time 11 milliseconds.

About this checker • Report an issue • Version: 20.11.14