Q:

Adding CSS to  is making unwanted alterations to the the size of the 

So I'm making a  practice website and testing out what I've learned so far and I appear to have hit a brick wall.  I'm having trouble with my css (I believe).  What I am trying to do is to have the <main> and the <section> elements float next to each other, underneath the <header>.  
My problem is that when I add the css to the <section> it changes the the size of the <body> to the size of the <header> and and then both the <main> and the <section> float underneath the body.   I have spent hours researching and trying to make adjustments that might help and I have had no luck.  
My other question is do you think Im getting ahead of myself by trying to make my site (semi) responsive?  This is my first page after all.  Should I just stick with pixels and points for now? 
Any help or suggestions would be greatly appreciated.  Thanks
<! DOCTYPE html>
<html lang="en">
<head>
    <meta charset = "utf-8">
    <title>Home</title>
    <link rel = "shortcut icon" href = "images/favicon.ico">
    <link rel = "stylesheet" href = "styles/sharedstyles.css">
    <link rel ="stylesheet" href="styles/homestyle.css">

</head>

<body>
    <header>
        <img id="logo" src="images/logo.png" alt="B-more Neighborly Logo" height="181" width="273">
        <nav id="nav_menu_3">
        <ul>
            <li><a href="index.html" >Home</a></li>
            <li><a href="pages/donate.html">Local Donations</a></li> 
            <li><a href="pages/volunteer.html">Volunteer</a></li> 
            <li><a href="pages/other.html">Other Ways You Can Help</a></li>
            <li><a href="pages/contact.html">Contact Us</a></li>
        </ul>
        </nav>
    </header>

    <main>
        <h1>This page will contain:</h1>
            <p> Gibberish   dsfhaskdjfhaslkjdhfaslkjdhfaklsjdhfasjhdfajshdfjsahdfjssskljbsbsaksjhdfkashfkjashdfkjashdfkjashdfkasjhdfaksjhdfaksjhdfkajshdlfjhasdjhfalskdjfhalsjdhflasjhdflkajshdflajshdflkjashdfljkhasldjfhaskjdhfalsjkdhfalksjhdfajkshdfkajshdflkajshdflashdflajshdfashdfhasldkjfhasldfhaskdflaskdjhfalsdjhfalksflasjkdhfalskjhdflaskjdhfalskjdhflaksdjhflaskjdhfalskjdhfalsjkdhflasjkdhflsakjdhflasdjfhalsdjfhalsdjkhfalsdjhf
            </p>
    </main>

    <section>
        <p><img src="images/skyline.jpg" alt="Baltimore Skyline" height="300" width="431"></p>
        <p><img src="images/hands.jpg" alt="Helping Hands" height="300"     width="431"></p>
    </section>
</body>
</html>

Here is the CSS.  I have added the small amount that I had in the homestyle.css file to the bottom to make it easier to read
body{
   background-color: #bae2c2;
   border: 2px solid black;/**/
}

header{
   height:16em;
   width:100%;
}

#logo{
     margin:1em;
}

#nav_menu_3{
    float:right;
    margin-top:4em;
    margin-right:5em;
}
#nav_menu_3 ul {
    list-style: none;
}
#nav_menu_3 ul li {
    float: left;
}
#nav_menu_3 ul li a {
    text-align: center;
    display: block;
    width: 210px;   
    height:35px;
    padding: 1em 0;     
    text-decoration: none;
    background-color: #CC7814;
    color: white;
    font-weight: bold;
    border-right: 2px solid white;
}

#nav_menu_3 ul li a:hover, #nav_menu_3 ul li a:focus {
    background-color:#6f19ff;
}

p {
    font-family:"Arial";
    font-size:"20px";
}

/*here is the CSS i believe is causing me the problems*/

main{
            float:left;
            height: 40%;
            width: 40%;
        }
section{
            float:left;
            height:50%;
            width:40%;
        }

A:

What you have here is a case of collapsing containers.   An element that contains floats does not take them into account when calculating its height (unless the floats are cleared). 
You will also note this is happening with your <header> and your <ul> since your <nav> and your <li>s are also being floated. 
There are a few ways around this.   Some people use the 'clear float' hack.   I'd advise against using this hack though. 
A much better way would be to simply assign the surrounding container an overflow: hidden;. 
I suggest you wrap all content into a wrapper div.   Then assign that div the overflow: hidden; style.   That should take care of it. 
Here is an example:

body{
   background-color: #bae2c2;
   font-family:"Arial";
   font-size: 12px;
}
.wrapper {
  overflow: hidden;
  padding: 1em;
  border: 1px solid black;
}
header {
  border: 1px solid green;
  overflow: hidden;
}
#logo {
  width: 100px;
  margin:1em;
  float: left;
}
#nav_menu_3 ul {
  list-style: none;
  overflow: hidden;
  border: 1px solid purple;
  margin: 0;
  padding: 0;
}
#nav_menu_3 ul li {
  float: left;
  margin: 0;
  padding: 0;
}
#nav_menu_3 ul li a {
    text-align: center;
    display: block;
    width: 100px;
    height:25px;
    padding: 1em;     
    text-decoration: none;
    background-color: #CC7814;
    color: white;
    font-weight: bold;
    border-right: 2px solid white;
}
#nav_menu_3 ul li a:hover, #nav_menu_3 ul li a:focus {
    background-color:#6f19ff;
}
main {
  float:left;
  width: 40%;
  margin-right: 1%;
}
section {
  float:left;
  width:40%;
}
<div class="wrapper">
  <header>
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="" id="logo" />
    <nav id="nav_menu_3">
      <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="pages/donate.html">Local Donations</a></li> 
        <li><a href="pages/volunteer.html">Volunteer</a></li> 
        <li><a href="pages/other.html">Other Ways You Can Help</a></li>
        <li><a href="pages/contact.html">Contact Us</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>This page will contain:</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.  Commodi voluptatibus quae inventore alias labore sed aliquam necessitatibus id deserunt error, modi magni ea ipsa, natus quod libero odio a quos.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.  Quam error obcaecati esse delectus amet ullam laborum perferendis consequatur vitae, debitis magni accusamus sequi officia, sapiente est provident.  At, quas obcaecati.</p>
  </main>
  <section>
    <p><img src="https://placekitten.com/300/100" alt="" /></p>
    <p><img src="https://placekitten.com/g/300/100" alt="" /></p>
  </section>
</div>

