Basis Formatting Portfolio Challenge

Basis Formatting Portfolio Challenge
0

#1

I am having difficulty in getting the page to format, I have used many bits of code to get the page started with a center headline. My tribute page has formatted OK (prepared several months ago), so as a check I copied and pasted the whole code from tribute into a new PEN which again resulted in all formatting to the LEFT.
Cannot move on, any ideas please.


#2

Share your code and we can fix it.


#3

Having gone through the first part again there improvements that can be made.Here is the code that was copied/pasted:

<Style>
  .header-text {
    color: blue;
  }
  .caption-text {
    font-size: 16px;
    font-family: monospace
  }
  .bold-text {
    font-weight: bold
  }
  .border-ridge {
    border-color: brown;
    border-width: 20px;
    border-style: ridge;
  }
  .image-center {
    display: block;
    margin: auto;
    width: 80%;
    height: 600px;
}
  }
  
  
  </style>

<div class="container-fluid">
  
    
    <h1 class="header-text text-center">Verity Ann Narrowboat</h1> 
    <H2 class="text-center">57 ft Traditional Style  2000</h2>
    
    <img class="border-ridge image-center"src="https://www.whiltonmarina.co.uk/images/Boats/originals/3814.jpg" alt="Verity Ann Narrowboat.">
    <H3 class="caption-text text-center">Verity Ann Narrowboat Cruising</h3>
<div class="row">
  <div class="col-xs-5">
        <h4 class="bold-text">Boat, Engine and Electrical</h4>
  </div>
  <div class="col-xs-6">
        <h4 class="bold-text">Accommodtion and Services</h4>
  </div>
  
  
 </div>
  
    
<div class="row">
  <div class="col-xs-3">
        
    <ul>
      <b>Hull</b>
      <li>Hull Builder:</li>
      <br>
      <li>Fitting out:</li>
      <br>
      <li>Keel Type:</li>
      <li>Plating Specification:</li>
      <br>
      <br>
      <b>Engine</b>
      <li>Manufacture:</li>
      <li>Cylinders:</li>
      <li>Cooling:</li>
      <li>Diesel tank Capacity:</li>
      <br>
      <b>Electrical</b>
      <li>Low Voltage:</li>
      <br>
      <li>Landline Connection:</li>
      <br>
      <li>Inverter:</li>
      <li>Starter Batteries</li>
      <li>Domestic Batteries</li>
    </ul>
  </div>
    <div class="col-xs-2">
        
   <ul>
      <br>
      <li>John White</li>
      <li>Triton Boats</li>
      <li>Flat Hull</li>
      <li>Steel 10/6/4</li>
      <br>
     <br>
      <li>Lombardini</li>
      <li>Four</li>
      <li>Keel Water</li>
      <li>45 gallons</li> 
     <br>
     <li>12 Volts DC</li>
     
      <li>240 V 50Hz</li>
      <li>Yes</li>
      <li>one</li>
     <li>3</li>
  
     
         </ul>
  </div>
  <div class="col-xs-3">  
    <ul>
      <b>Berths</b>
      <br>
      <br>
      <b>Saloon/Lounge</b>
      <br>
      <br>    
      <b>Galley/Kitchen</b>
      <br>
      <br>
      <b>Bathroom</b>
      <br>
      <br>
      <br>
      <b>Heating</b>
      <br>
      <li>Hot Water Source:</li>
      <br>
      <li>Central Heating:</li>
      <br>
      <li>Solid Fuel Stove:</li>
      <br>
      <li>Water Tank Capacity:</li>
      <br>
      <li>Water Tank Material:</li>
   
      
    </ul>
  </div>   
      
 <div class="col-xs-4">
        <ul>
          <li>Single berth coverts to double</li>
          <li>Wardrobes x 2
          <li>L shape seating converts to double bed</li>
          <li>Fitted units with stainless steel sink, oven, hob, refrigerator</li>
          <li>Thetford WC, shower, wash hand basin</li>
 <br>
          <br>
          
      <li>Mikuni + Engine</li>
          <br>
      <li>Mikuni</li>
          <br>
      
      <li>Boatman</li>
          <br>

      <li>120 Gallons</li>
          <br>
    
      <li>Stainless Steel</li>
      
    </ul>
  </div>
  </div>
   <p class="text-center">All narrowboats are 6 feet 10 inchs wide. Generally they are made entirely of steel, although some older boats have wooden and sometimes glass reinforced plastic (GRP) cabins.</p>
  <p class="text-center">Widebeams are wider than narrowboats and dutch barges are larger.</p>  
  </div>
<div>
  <p class="text-center">For more details of the boat and a selection of other boats of various lengths and layouts <a href="http://www.whiltonmarina.com/html/">Visit Whilton Marina here.</a></p>
</div>
</div>
</div>
</div>

#4

I’ve edited your post for readability. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.


#5

Hi Thank you, I have found the “backtick” on my Spanish layout keyboard (Alt 9 6), do you need the code resent?


#6

Looks fine. I added bootstrap v3