HTML / CSS: Experiencing Issues Regarding Site Width / Height

Question

I am in the process of setting up a website advertising a region for people to visit as a task for myself.

I have spent some time attempting to place all I have done so

Answer 1

Something similar to the following:

Example here

Its not much but gives an idea, but it will also depend on the screen content and how much you want on there, too much then this could cause an issue, minimalistic then fine but the kitchen sink then ouch!

      <div class="container">
      <header>
        <div class="logo">
          <a href="#">Visit Clare Ireland</a>
        </div>
        <nav>
          <ul>
            <li><a href="#">Home |</a>
              </li>
              <li><a href="#">Maps |</a>
              </li>
              <li><a href="#">Hotels |</a>
              </li>
              <li><a href="#">Appartments |</a>
              </li>
              <li><a href="#">Attractions |</a>
              </li>
              <li><a href="#">Essentials |</a>
              </li>
              <li><a href="#">Bars & Clubs |</a>
              </li>
              <li><a href="#">Transport</a>
              </li>
          </ul>
        </nav>
      </header>
      <main>
        <section>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis quis laborum, ea repellat! Eius sint, minima nulla asperiores excepturi. Fuga libero exercitationem soluta nam perspiciatis, sit iusto enim asperiores quibusdam.

        </section>

      </main>
      <footer>
        <p>Footer content</p>  
      </footer>
      </div>

CSS

      html,
      body {
        margin: 0;
        padding:0;
        box-sizing: border-box;
        font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
        font-size: 16px;
      }


      header {
        margin: 0 auto;
        padding: 0;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 80px;
        background: #292526;
        color: white;
        overflow: hidden;
        box-sizing: inherit;
      }

      header:before,
      header:after {content: " ";display: table;}
      header:after {clear: both;}

      header .logo {
        margin-top: 20px;
        position: relative;
        float: left;
        width: 40%;
      }

      header nav {
        position: relative;
        float: left;
        width: 60%;
        text-align: left;
      }

      header a:link,
      header a:visited,
      header a:active {
        margin: 0 auto;
        padding: 0;
        padding-left: 20px;
        font-size: 26px;
        text-decoration: none;
        color: white;
        text-align: center;
      }

      nav ul {
        list-style: none;
      }

      nav ul li {
        display: inline-block;
      }

      nav ul li a:link,
      nav ul li a:visited,
      nav ul li a:active {
        margin: 0;
        padding: 0;
        font-size: 12px;
        text-decoration: none;
        color: white;
      }

      main {
        margin: 0;
        padding: 0;
        position: fixed;
        top:80px;
        bottom: 50px;
        left: 0;
        right:0;
        width: 100%;
        height: 100%;
        background: white url('http://i.imgur.com/VsIRZNZ.jpg') no-repeat center center;
        background-size: cover;
      }

      main section {
        margin: 0;
        padding: 20px;
        position: relative;
        top: 20px;
        bottom: 20px;
        left: 20px;
        right: 20px;
        width: 93%;
        background: rgba(255,255,255,.4);
      }

      footer {
        margin: 0 auto;
        padding: 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 40px;
        background: #292526;
        color: white;
      }
      footer p {
        margin: 0;
        padding: 0;
        padding-top: 10px;
        text-align: center;
        font-size: 12px;
        text-transform: uppercase;
      }