I am trying to design a dropdown menu where the child item of the menu changes color(green) but the item doesn't extend to cover all the box size horizontally leaving the remaining part in its original color.
Thank you!
HTML Doc
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="stylesheet.css">
<title>Home</title>
</head>
<body>
<div id="container">
<header>
<img src="jarir.svg">
<div id="search"><input></div>
</header>
<nav>
<div class="dropdown">
<a>All Catgories</a>
<div class="dropdown_content">
<a>Link1</a>
<a>Link2</a>
<a>Link3</a>
</div>
</div> <!-- dropdown-->
<a>Shop by Brand</a> <a>Online Exclusive</a>
</nav>
</div> <!-- container-->
</body>
</html>
CSS
#container{}
img{
width: 130px;
height: 45px;
}
#search, #search input{
display: inline-block;
position: absolute;
margin: auto;
margin: 5px 10px;
width:500px;
max-width: 500px;
min-width: 200px;
background-color: lightgray;
}
nav a{
margin-right: 30px;
padding: 10px;
float:left;
border-bottom: 0.7mm solid red;
}
nav a:hover{
border-bottom: 1.2mm solid #3A44F8;
}
.dropdown{
position: relative;
display: inline-block;
float: left;
}<!-- -->
.dropdown:hover .dropdown_content {
display: block;
border-bottom: 0px;
}
.dropdown_content a{border-bottom: 0px;}
.dropdown:hover{
background-color:Blue;
color: red;
}
.dropdown_content a:hover{
background-color:green;
color: yellow;
border: 0px;
display: block;
}
.dropdown_content {
display: none;
position:absolute;
top: 35px;
background-color:#f7f7f7;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
list-style-type: none;
color: black;
}
You can try this code. There is some css changes.
Like .dropdown_content a{border-bottom: 0px;display: block;width: 100%;box-sizing: border-box;}
#container{}
img{
width: 130px;
height: 45px;
}
#search, #search input{
display: inline-block;
position: absolute;
margin: auto;
margin: 5px 10px;
width:500px;
max-width: 500px;
min-width: 200px;
background-color: lightgray;
}
nav a{
margin-right: 30px;
padding: 10px;
float:left;
border-bottom: 0.7mm solid red;
}
nav a:hover{
border-bottom: 1.2mm solid #3A44F8;
}
.dropdown{
position: relative;
display: inline-block;
float: left;
}<!-- -->
.dropdown:hover .dropdown_content {
display: block;
border-bottom: 0px;
}
.dropdown_content a{border-bottom: 0px;display: block;width: 100%;box-sizing: border-box;}
.dropdown:hover{
background-color:Blue;
color: red;
}
.dropdown_content a:hover{
background-color:green;
color: yellow;
border: 0px;
}
.dropdown_content {
display: none;
position:absolute;
top: 35px;
background-color:#f7f7f7;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
list-style-type: none;
color: black;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="stylesheet.css" />
<title>Home</title>
</head>
<body>
<div id="container">
<header>
<img src="jarir.svg" />
<div id="search"><input /></div>
</header>
<nav>
<div class="dropdown">
<a>All Catgories</a>
<div class="dropdown_content">
<a>Link1</a> <a>Link2</a> <a>Link3</a>
</div>
</div>
<!-- dropdown -->
<a>Shop by Brand</a> <a>Online Exclusive</a>
</nav>
</div>
<!-- container -->
</body>
</html>
Related
I am writing a web and the drop-down menu button is not working. The hoverable content is not shown. May anyone tell me the reason, please. Thanks a lot!!!
Here is the code
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
h1.header {
text-align: center;
color: #66F3ED;
}
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #808080;
height: 70px;
font-size: 18px;
}
li {
float: left;
height: 70px;
}
li:last-child {
border-bottom: none;
}
li a {
display: block;
color: #66f3ed;
text-align: center;
padding: 23px 60px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #808080;
border-bottom: 5px solid #66f3ed;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
height: 800px;
}
/* Left and right column */
.column.side {
width: 6%;
background-color: #868686;
overflow: hidden;
z-index:2;
}
/* Middle column */
.column.middle {
width: 70%;
background-color: #777777;
z-index:1;
}
.column.right {
width: 24%;
background-color: #919191;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/*Drop down Menu*/
.dropbtn {
background-color: transparent;
color: #66F3ED;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
display: inline-block;
z-index: 10!important;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
left:100%;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="row">
<!--Side Menu Bar-->
<div class="column side">
<div class="dropdown">
<button class="dropbtn"><img src="Menu/Menu-1.png" style="width: 100%" alt="Menu"></button>
</div>
<br /><br />
<img src="menu.jpg" alt="Menu">
</div>
<div class="dropdown-content">
Link 1
Link 2
</div>
<div class="column middle">
<ul>
<li><img src="sa_crop.gif" style="height: 70px"alt="Logo"></li>
<li><a class="active" href="#home">Face Mask Detection</a></li>
<li>Social Distance Detection</li>
</ul>
<br /><h1 class="header">Face Mask Detection</h1><br />
<!--Face Mask Detection Area-->
</div>
<div class="column right">
<ul>
<li style="float:right"><img src="user_808080.jpg" style="height: 70px" alt="User"></li>
</ul>
</div>
</div>
</body>
</html>
The whole codings are shown above. I am not sure about the problem, yet it should be the CSS styling issues. Please someone give me a hint. Thank you very much!
You have several issues in both your HTML and CSS to solve, so the menu will work correctly.
First: The <div class="dropdown"> should contins the button, image and dropdown-content inside </div>
for example, change:
<div class="column side">
<div class="dropdown">
<button class="dropbtn"><img src="Menu/Menu-1.png" style="width: 100%" alt="Menu"></button>
</div>
<br /><br />
<img src="menu.jpg" alt="Menu">
</div>
<div class="dropdown-content">
Link 1
Link 2
</div>
to
<div class="column side">
<div class="dropdown">
<button class="dropbtn"><img src="Menu/Menu-1.png" style="width: 100%" alt="Menu"></button>
<br /><br />
<img src="menu.jpg" alt="Menu">
<div class="dropdown-content">
Link 1
Link 2
</div>
</div>
</div>
Second: in the style of .dropdown-content, using of position: absolute; is correct but you should change left:100%; to left:0;, therefore you get the dropdown-content beside the menu-item.
Third: Add the CSS style code for hovering over the menu item, to make the sub-menu-item appears as:
.dropdown:hover .dropdown-content{
display: block;
}
Fourth: Change the background of the sub-menu-item when hovering, for example
.dropdown-content a:hover {
color: white;
background-color: red;
}
if you make the above four points, the menu will behave as expected.
and here is the full modified code of the question- just press Run the code snippet below:
* {
box-sizing: border-box;
font-family: Arial, Helvetica, sans-serif;
}
h1.header {
text-align: center;
color: #66F3ED;
}
body {
margin: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #808080;
height: 70px;
font-size: 18px;
}
li {
float: left;
height: 70px;
}
li:last-child {
border-bottom: none;
}
li a {
display: block;
color: #66f3ed;
text-align: center;
padding: 23px 60px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #808080;
border-bottom: 5px solid #66f3ed;
}
/* Create three unequal columns that floats next to each other */
.column {
float: left;
height: 800px;
}
/* Left and right column */
.column.side {
width: 6%;
background-color: #868686;
overflow: hidden;
z-index:2;
}
/* Middle column */
.column.middle {
width: 70%;
background-color: #777777;
z-index:1;
}
.column.right {
width: 24%;
background-color: #919191;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/*Drop down Menu*/
.dropbtn {
background-color: transparent;
color: #66F3ED;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
display: inline-block;
z-index: 10!important;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
left:0; /* Modified */
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* adding */
.dropdown:hover .dropdown-content{
display: block;
}
/* adding */
.dropdown-content a:hover {
color: white;
background-color: red;
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column.side, .column.middle {
width: 100%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Website Layout</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="row">
<!--Side Menu Bar-->
<div class="column side">
<div class="dropdown">
<button class="dropbtn"><img src="Menu/Menu-1.png" style="width: 100%" alt="Title"></button>
<br /><br />
<img src="menu.jpg" alt="MenuItem">
<div class="dropdown-content">
Link 1
Link 2
</div>
</div>
</div>
<div class="column middle">
<ul>
<li><img src="sa_crop.gif" style="height: 70px"alt="Logo"></li>
<li><a class="active" href="#home">Face Mask Detection</a></li>
<li>Social Distance Detection</li>
</ul>
<br /><h1 class="header">Face Mask Detection</h1><br />
<!--Face Mask Detection Area-->
</div>
<div class="column right">
<ul>
<li style="float:right"><img src="user_808080.jpg" style="height: 70px" alt="User"></li>
</ul>
</div>
</div>
</body>
</html>
Here is the fiddle: https://jsfiddle.net/gnsho1br/2/
There were similar questions that suggests to set display to inline-block but I have done that. My container is col-1. I also tried to give my logo class of float: left but then the menu is off-center (maybe the left margin starts at the end of the logo???).
Use display: flex instead. If you want items to be centered, try align-items: center, justify-items: center. Refer to Flexbox for more info.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
li,
a,
button {
font-family: "Elliot-Sans", sans-serif;
font-weight: 300;
font-size: 14px;
color: #777777;
text-decoration: none;
}
#wrapper {
margin: 0 15px;
padding: 15px 0;
position: relative;
}
.row {
max-width: 65%;
margin: 0 auto;
padding: 75px 0;
position: relative;
}
.col-1 {
width: 100%;
padding: 20px;
display: flex;
}
#header {
height: 71px !important;
overflow: visible;
z-index: 9999;
width: 100%;
position: absolute !important;
}
#header .row {
padding: 0;
}
#header ul {
text-align: center;
}
.logo {
width: 150px;
height: auto;
cursor: pointer;
margin-right: auto;
background-color: inherit;
display: inline-block;
vertical-align: middle;
}
#topNavBar {
list-style: none;
margin: 0;
background-color: #ffffff;
}
ul{
display: flex;
}
#topNavBar li {
display: inline-block;
padding: 0px 20px;
background-color: inherit;
vertical-align: middle;
}
#topNavBar li a {
transition: all 0.2s ease 0s;
font-weight: 400;
text-transform: uppercase;
}
#topNavBar li a:hover {
color: #04ad9e;
text-decoration: none;
padding-bottom: 4px;
border-bottom: 3px solid #04ad9e;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
rel="stylesheet"
/> -->
<link
href="https://fonts.googleapis.com/css2?family=Rajdhani:wght#300;400&display=swap"
rel="stylesheet"
/>
<link
href="https://unpkg.com/tailwindcss#^1.0/dist/tailwind.min.css"
rel="stylesheet"
/>
<link href="style.css" rel="stylesheet" />
<title>Title</title>
</head>
<body>
<div id="wrapper">
<header id="heroImage">
<div id="header" class="navCollapse">
<div class="row clearfix">
<div class="col-1">
<div class="logo">
<img class="logo" src="image.png" alt="logo" />
</div>
<nav id="topNavBar">
<ul>
<li>Home</li>
<li>About</li>
<li>Read</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
</div>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div class = "wrapper">
<header>
<div class = "CentralHeader">
<div class = "LinkBar" id = "HeaderBar" >All</div>
<div class = "SampleMenu">
<ul>
<li>Movies</li>
<li>Events</li>
<li>Sports</li>
<li>Plays</li>
</ul>
</div>
</div>
</header>
<main>
<div class = "main">
<div class = "TopMovies" >
</div>
<div class = "JustForYou">
</div>
</div>
</main>
</div>
</body>
<style type="text/css">
.wrapper{
height: 100vh;
display: flex;
flex-direction:column;
}
header{
height: 400px;
border-bottom: 4px solid beige;
}
main{
flex:1
}
.LinkBar {
cursor: pointer;
width: 140px;
height: 37px;
border: 1px solid #c02c3a;
margin-top: 50px;
margin-left: 300px;
background-color: #c02c3a;
text-align: center;
padding-top: 9px;
color: white;
display: inline-block;
}
div.SampleMenu ul {
list-style-type: none;
width: 140px;
background-color: Grey;
margin-left: 300.5px;
padding: 0;
margin-top: 0px;
display: none;
border-top: 2px solid #fff;
}
div.SampleMenu ul li {
color: White;
padding: 0;
}
div.SampleMenu ul li a {
color: white;
display: block;
padding: 10px;
font-size: large;
text-align: center;
}
#HeaderBar:hover~.SampleMenu ul,
.SampleMenu ul:hover {
display: block;
}
.main{
width:auto;
height: 500px;
border:2px groove red;
}
</style>
</body>
</html>
In the above segment,the container space of "header" is altered on hovering the LinkBar.On hovering ,the dropdown is displayed with the mentioned height for the header but in normal state,header height is decreased.When the CSS property for the wrapper tag is removed ,the functionality i.e container space for header is available as mentioned in CSS (400px).What is causing the height of the header to be dynamic?
If you want the menu to overlap the header, you need to add "position: absolute;" to the menu (div.SampleMenu ul in your case to be specific) and "position: relative;" to the header.
You should read more about the ways of positioning and how they interact with each other.
I am having some problems with floated nav. As can be seen in the first image below, I use position in my code and the result is that the nav is floated above the logo when I scaled the browser.
But I want the nav and the logo to be separated (like the second image) whenever I scale the browser. What should I do?
Are there any other ways to do that without using float?
This my my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<style>
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header .logo{
float: left;
}
header nav{
float: right;
position: absolute;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="images\logo.png" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
There are many ways to do that. Here's one:
Add this to your style:
nav {margin-left: 50px;}
Here is one version where nav floats right: jsfiddle
CSS:
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header .logo{
float: left;
margin-left: 50px;
}
/* width is set to 80% and nav floats right, no pos absolute */
header nav{
float: right;
width: 80%;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
This is other method using display:flex.
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header {
display: flex !important;
justify-content: space-between;
}
.logo img {
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
#media screen and (max-width:1024px){
.logo {
width: 20%;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="https://dummyimage.com/250x150/000/fff&text=logo" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
You might need to adjust the widths a little bit. You can add max-width and min-with to both your logo and nav too.
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
/* add the width and margin to your logo class*/
header .logo{
float: left;
margin-right:2%;
width:26%;
}
/* make sure your image has a width */
header .logo img{
width:100%;
}
/* add the width to your nav class */
header nav{
float: right;
width:70%;
padding-top:5%;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="https://dummyimage.com/350x183/000/fff&text=logo" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
This is one method using float:
.wrapper{
max-width: 1600px;
margin: 0 auto;
}
header{
background-color: lightgray;
overflow: hidden;
padding: 20px;
position: relative;
}
header .logo{
float: left;
}
header nav {
float: right;
position: relative;
margin-top: 35px;
}
header li{
float: left;
margin: 0px 5px 0px 5px;
}
header a{
text-decoration: none;
font-weight: bold;
color: white;
padding: 10px;
}
img {
height: auto;
max-height: 100%;
max-width: 100%;
width: auto;
}
#media screen and (max-width:1169px){
header .logo {
width: 19%;
}
}
#media screen and (max-width:767px){
header .logo {
width: 15%;
}
header a {
padding: 5px;
font-size: 14px;
}
header nav {
margin-top: 15px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
<img src="https://dummyimage.com/350x183/000/fff&text=logo" alt="logo">
</div>
<nav>
<ul>
<li>HOMEPAGE</li>
<li>INTRODUCTION</li>
<li>PRODUCTS</li>
<li>PRICING</li>
<li>CONTACT</li>
</ul>
</nav>
</header>
</div>
</body>
</html>
My title basically says it all. For some reason I cannot get it to stretch the entire page. I am new to this so any help would be great.
My page
This is my html for the code. I have been told that the width and margin needed to be changed from a friend and I tried doing that but got the same results.
.maincontainer{
width: 990px;
margin: 0 auto;
}
body {
background: #B2906F;
font-family: arial;
margin: 0;
height: 100%;
}
.picture{
display: inline;
margin: 0;
padding: 0;
position: fixed;
z-index: -1;
background-size: 100%
}
.button{
padding: 10px 15px;
text-decoration: none;
border-radius: 5px;
background-color: #05280c
}
.button-primary:hover {
background-color: #05370c
}
h1 {
display: inline;
margin: 0;
background-color: #2c421f;
padding: 5px;
position: absolute;
}
ul{
margin: 0;
display: inline;
padding: 0px 0px 0px 250px;
}
ul li {
display: inline-block;
list-style-type: none;
padding: 15px 10px;
color: #050c0c;
margin: 0;
border-radius: 5px;
}
ul li a {
color: black;
}
footer{
clear: both;
}
nav {
color:
height: 40px;
margin: 0;
background-color: #2c421f;
}
<!doctype html>
<div class="maincontainer">
<html>
<head>
<title>NWWolfPack</title>
<link href="main.css" rel="stylesheet" />
</head>
<body>
<h1>NW Wolf Pack</h1>
<div class="picture"><img src="camo.jpg" width="1000" height="150">
<header>
<nav>
<ul>
<li class="button"><strong>Home</strong></li>
<li><strong>Records</strong></li>
<li><strong>Membership</strong></li>
<li><strong>Contact Us</strong></li>
</ul>
</nav>
</header>
</body>
<footer>2017 Dillan Hall</footer>
</html>
Arrange the html in well structured order and make the container div of with 100% then it will take the whole width: demo below
html,
body{
height: 100%;
}
body {
background: #B2906F;
font-family: arial;
margin: 0;
}
.maincontainer{
width: 100%;
margin: 0 auto;
}
.picture{
display: inline;
margin: 0;
padding: 0;
position: fixed;
z-index: -1;
background-size: 100%;
width: 100%;
}
.button{
padding: 10px 15px;
text-decoration: none;
border-radius: 5px;
background-color: #05280c
}
.button-primary:hover {
background-color: #05370c
}
h1 {
display: inline;
margin: 0;
background-color: #2c421f;
padding: 5px;
position: absolute;
}
ul{
margin: 0;
display: inline;
padding: 0px 0px 0px 250px;
}
ul li {
display: inline-block;
list-style-type: none;
padding: 15px 10px;
color: #050c0c;
margin: 0;
border-radius: 5px;
}
ul li a {
color: black;
}
footer{
clear: both;
}
nav {
color:
height: 40px;
margin: 0;
background-color: #2c421f;
}
<!DOCTYPE html>
<html>
<head>
<title>NWWolfPack</title>
<link href="main.css" rel="stylesheet" />
</head>
<body>
<div class="maincontainer">
<h1>NW Wolf Pack</h1>
<div class="picture"><img src="camo.jpg" width="1000" height="150">
<header>
<nav>
<ul>
<li class="button"><strong>Home</strong></li>
<li><strong>Records</strong></li>
<li><strong>Membership</strong></li>
<li><strong>Contact Us</strong></li>
</ul>
</nav>
</header>
</div>
<footer>2017 Dillan Hall</footer>
</body>
</html>
Your HTML code structure is not correct, I have corrected the HTML structure below:
<!doctype html>
<html>
<head>
<title>NWWolfPack</title>
<link href="main.css" rel="stylesheet" />
</head>
<body>
<div class="maincontainer">
<div class="picture"><img src="camo.jpg" height="150" style="width: 100%" />
<header>
<nav>
<ul>
<li class="button"><strong>Home</strong></li>
<li><strong>Records</strong></li>
<li><strong>Membership</strong></li>
<li><strong>Contact Us</strong></li>
</ul>
</nav>
</header>
</div>
</div>
</body>
<footer>2017 Dillan Hall</footer>
</html>
And to make the screen full size you need to modify your CSS code .maincontainer and it will solve your issue.
.maincontainer{
width: 100%;
margin: 0 auto;
}